<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前端 | WEB | VUE">
<meta property="og:type" content="website">
<meta property="og:title" content="Storm">
<meta property="og:url" content="https://storm4542.github.io/page/3/index.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="前端 | WEB | VUE">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Storm">
<meta name="twitter:description" content="前端 | WEB | VUE">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main">
  
    <article id="post-关于函数" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="4cf7e60f.html">JavaScript里的函数是什么</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="4cf7e60f.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-定义"><a href="#1-定义" class="headerlink" title="1.定义"></a>1.定义</h3><pre><code>i 匿名函数
</code></pre><p>​    <code>var fn = function(){return 1} 有name fn.name = &#39;fn&#39;</code></p>
<p>​    ii 具名函数</p>
<p>​    <code>function fn(){ return 1}</code></p>
<p>​    <code>var fn2 = function fn3(){ return 2 }</code></p>
<p>​     两者的区别在于函数作用域</p>
<p>​    <code>console.log(fn()) fn()</code>  </p>
<p>​    <code>console.log(fn3()) undefined</code></p>
<p>​    iii 箭头函数</p>
<p>​    <code>var fn = (i,j)=&gt;{return i+j}</code> fn.name = fn</p>
<p>###2.词法作用域（静态作用域）</p>
<pre><code>  var global1 = 1

     function fn1(param1){

       var local1 = &apos;local1&apos;
       var local2 = &apos;local2&apos;)
       function fn2(param2){
           var local2 = &apos;inner local2&apos;
           console.log(local1)
           console.log(local2)
       }

     function fn3(){
         var local2 = &apos;fn3 local2&apos;
         fn2(local2)
     }
   }


var i = 1,j = 2,k = 3;

function a(o,p,x,q){

var x = 4;
    alert(i+&apos;a&apos;);
function b(r,s) {
    var i = 11,y = 5;
        alert(i+ &apos;b&apos;);
    function c(t){
      var z = 6;
            alert(i+&apos;c&apos;);
    };
        //函数表达式
    var d = function(){
            alert(y+&apos;y d&apos;);
        };
        c(60);
        d();
};
    b(40,50);
    }

a(10,20,30);
</code></pre><p> 通过画出词法树分析。先找同级有没有，再找上级的。</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">方方的视频</a></p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">参考</a></p>
<p>###3.call stack</p>
<p>​    i stack</p>
<p>​    栈，先进后出，后进先出。</p>
<blockquote>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">1+1+1</a></p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">1+2+3</a></p>
<p><a href="javascript:;">递归</a></p>
<blockquote>
<p>斐波那契数列</p>
<p>function fb(n){</p>
<p>console.log(‘我正在计算’+ n );</p>
<p>if( n&gt;=3 ){</p>
<p>return fb(n-1) + fb(n-2)</p>
<p>}else{</p>
<p>return 1;</p>
<p>}</p>
<p>}</p>
</blockquote>
</blockquote>
<h3 id="4-this-amp-amp-arguments"><a href="#4-this-amp-amp-arguments" class="headerlink" title="4.this &amp;&amp; arguments"></a>4.this &amp;&amp; arguments</h3><ul>
<li><p>this 是隐藏的第一个参数，而且必须是对象。</p>
<ul>
<li><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>); <span class="built_in">console</span>.log(<span class="built_in">arguments</span>)&#125;</span><br><span class="line">f.call() <span class="comment">// window []</span></span><br><span class="line">f.call(&#123;<span class="attr">name</span>:<span class="string">'zty'</span>&#125;) <span class="comment">// &#123;name:'zty'&#125; []</span></span><br><span class="line">f.call(&#123;<span class="attr">name</span>:<span class="string">'zty'</span>&#125;,<span class="number">1</span>,<span class="number">2</span>) <span class="comment">// &#123;name:'zty&#125; [1,2]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>调用一个函数，开始需要三部</p>
<ul>
<li><p>记录函数的位置，放入 call stack</p>
</li>
<li><p>传入 this 对象</p>
</li>
<li><p>传入 arguments 数组(伪)</p>
</li>
</ul>
</li>
<li><p>为什么要用 call</p>
<ul>
<li>fn() 是 fn.call() 的阉割版</li>
</ul>
</li>
</ul>
</li>
<li><p>为什么 this 必须是对象</p>
<ul>
<li><p>因为 this 就是函数与对象之间的羁绊</p>
</li>
<li><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  name : <span class="string">'zty'</span>,</span><br><span class="line">  sayHi : <span class="function"><span class="keyword">function</span>(<span class="params">person</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(person.name ,<span class="string">'HI'</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">person.sayHi(person) <span class="comment">// zty HI 这种方式很蠢，前面有 person 后面有 person, 为什么 JS 不能帮我把 参数中的person 指定了呢，于是改造一下</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  name : <span class="string">'zty'</span>,</span><br><span class="line">  sayHi : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name ,<span class="string">'HI'</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">person.sayHi.call(person) <span class="comment">// zty HI 不吃语法糖 this === person ，指定this</span></span><br><span class="line">person.sayHi() <span class="comment">// 吃语法糖</span></span><br><span class="line">person.sayHi.call(&#123;<span class="attr">name</span>:<span class="string">'xxx'</span>&#125;) <span class="comment">// xxx HI 说明里面的函数其实跟person对象没有任何关系，是独立的。(this 真的很不靠谱)</span></span><br><span class="line">------------------------------</span><br><span class="line"><span class="keyword">var</span> fn = person.sayHi;</span><br><span class="line">fn() <span class="comment">// HI 显示不出 'zty',这是因为fn()其实是 fn.call() =&gt; this为window</span></span><br><span class="line">fn(person) <span class="comment">// HI this === window</span></span><br><span class="line">fn.call(person) <span class="comment">// zty HI this === persom</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h3 id="5-call-aplly"><a href="#5-call-aplly" class="headerlink" title="5.call/aplly"></a>5.call/aplly</h3><p>​    i call 用是函数调用标准写法，传递this , xxx.call(ASthis , arguments)</p>
<p>​    ii  当你不确定参数的个数时候(数组)，使用apply , xxx.apply(ASthis , [ … ])</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> n = <span class="number">0</span> ;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i&lt;<span class="built_in">arguments</span>.length ; i++)&#123;</span><br><span class="line">    n+=<span class="built_in">arguments</span>[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> n ;</span><br><span class="line">&#125; <span class="comment">// 无论有多少参数都可以求和的函数</span></span><br><span class="line">sum.call(<span class="literal">undefined</span> , <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)   <span class="comment">// 6</span></span><br><span class="line">sum.call(<span class="literal">undefined</span> , <span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>) <span class="comment">// 10</span></span><br><span class="line"><span class="comment">//假如你不知道有多少参数呢？传给你一个数组 a , 并不知道里面的内容，如何求和？</span></span><br><span class="line"><span class="comment">//或者 a.length === 100 ，你如何传参呢？</span></span><br><span class="line">sum.apply(<span class="literal">undefined</span> , a);</span><br></pre></td></tr></table></figure>
<h3 id="6-bind"><a href="#6-bind" class="headerlink" title="6.bind"></a>6.bind</h3><p>​    call 和 apply 都是直接调用函数，而 bind 是返回一个新的函数 ， 这个新函数会call 原来的参数 ，call 的参数由你指定。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> view = &#123;</span><br><span class="line">  element : <span class="string">'#div'</span>,</span><br><span class="line">  bindEvents : <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.element.onClick = <span class="keyword">this</span>.onClick.bind(<span class="keyword">this</span>)</span><br><span class="line">    <span class="comment">//view.element.onClick = view.onClick.bind(view)</span></span><br><span class="line">    <span class="comment">//this.onClick.bind(this) bind的参数this ，会变成 onClick 的第一个参数</span></span><br><span class="line">    <span class="comment">//为什么这么做？因为 onClick 的 this ， 是被点击元素，我们需要的 this === view</span></span><br><span class="line">  &#125;</span><br><span class="line">    onClick: <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.element.addClass(<span class="string">'active'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="7-回调-callback"><a href="#7-回调-callback" class="headerlink" title="7.回调 callback"></a>7.回调 callback</h3><p>​    i 名词形式 ： 被当做参数的函数 <code>array.sort(function(a,b){return a-b})</code></p>
<p>​    ii 动词形式 ： 调用这个回调</p>
<p>​    回调跟异步没有一点关系</p>
<h3 id="8-构造函数"><a href="#8-构造函数" class="headerlink" title="8.构造函数"></a>8.构造函数</h3><p>​    i 返回对象的函数就是构造函数  <code>new Number(1)</code></p>
<p>​    ii 一般首字母大写。</p>
<h3 id="9-箭头函数"><a href="#9-箭头函数" class="headerlink" title="9.箭头函数"></a>9.箭头函数</h3><p>​    i 箭头函数没有 this </p>
<p>​    ii 有 arguments </p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-MVC" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="5983b51f.html">前端中的MVC</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="5983b51f.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="前端中的MVC"><a href="#前端中的MVC" class="headerlink" title="前端中的MVC"></a>前端中的MVC</h2><p><strong>需求:通过AJAX获取数据，展示一个图书的书名，数量，并且用户可以修改数量，并上传到服务器。</strong></p>
<p>###1.意大利面条写法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*因为没有后台，默认bookdata就是从服务器传来的数据，由fethDb获取，saveDb更新 */</span></span><br><span class="line"><span class="keyword">var</span> bookData = &#123;</span><br><span class="line">    <span class="string">"id"</span>: <span class="string">"1"</span>,</span><br><span class="line">    <span class="string">"name"</span>: <span class="string">"javascript高程"</span>,</span><br><span class="line">    <span class="string">"number"</span>: <span class="number">2</span> <span class="comment">//数量</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fetchDb</span>(<span class="params"></span>) </span>&#123; <span class="comment">//获取数据</span></span><br><span class="line">    <span class="keyword">return</span> bookData;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">saveDb</span>(<span class="params"></span>) </span>&#123; <span class="comment">//更新数据</span></span><br><span class="line">    <span class="keyword">return</span> bookData;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*我们需要把内容放到HTML里，所以需要有个模板 */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> template = <span class="string">`</span></span><br><span class="line"><span class="string">        书名&lt;span id="name"&gt;《__name__》&lt;/span&gt;</span></span><br><span class="line"><span class="string">        数量&lt;span id="number"&gt; __number__&lt;/span&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;button id="add"&gt;加一&lt;/button&gt;</span></span><br><span class="line"><span class="string">        &lt;button id="minus"&gt;减一&lt;/button&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line"><span class="comment">/*将我们的数据，放入模板*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showBook</span>(<span class="params">result</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> html = template.replace(<span class="string">'__name__'</span>, result.name).replace(<span class="string">'__number__'</span>, result.number);</span><br><span class="line">    $(<span class="string">'#app'</span>).html(html)</span><br><span class="line">&#125;</span><br><span class="line">showBook(fetchDb()) <span class="comment">//渲染模板</span></span><br><span class="line"><span class="comment">/*写加减数量的方法 */</span>     </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>) </span>&#123; </span><br><span class="line">    bookData.number+=<span class="number">1</span> </span><br><span class="line">    <span class="keyword">var</span> newdata =  saveDb(); <span class="comment">//假设更新了，并从服务器获取了修改后的新数据</span></span><br><span class="line">    $(<span class="string">'#number'</span>).text( newdata.number)</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line">$(<span class="string">'#add'</span>).on(<span class="string">'click'</span>,add)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">minus</span>(<span class="params"></span>) </span>&#123; </span><br><span class="line">    bookData.number-=<span class="number">1</span></span><br><span class="line">    <span class="keyword">var</span> newdata =  saveDb();</span><br><span class="line">    $(<span class="string">'#number'</span>).text( newdata.number)</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line">$(<span class="string">'#minus'</span>).on(<span class="string">'click'</span>,minus)</span><br></pre></td></tr></table></figure>
<p><em>这种代码写法叫做意大利面条式代码，表示代码长短不一，很杂乱，如果我想要读懂这段代码，必须从开头读起。</em></p>
<h2 id="2-MVC"><a href="#2-MVC" class="headerlink" title="2.MVC"></a>2.MVC</h2><p><strong>一些程序员想出了解决办法</strong></p>
<p>一些程序员通过自己的总结，发现这些代码总是可以分成三类：</p>
<ol>
<li>专门操作远程数据的代码（fetchDb 和 saveDb 等等）</li>
<li>专门呈现页面元素的代码（innerHTML 等等）</li>
<li>其他控制逻辑的代码（点击某按钮之后做啥的代码）</li>
</ol>
<p>为什么分成这三类呢？因为我们前端抄袭了后端的分类思想，后端代码也经常分为三类：</p>
<ol>
<li>专门操作 MySQL 数据库的代码</li>
<li>专门渲染 HTML 的代码</li>
<li>其他控制逻辑的代码（用户请求首页之后去读数据库，然后渲染 HTML 作为响应等等）</li>
</ol>
<p>这些思路经过慢慢的演化，最终被广大程序员完善为 MVC 思想。</p>
<ol>
<li>M 专门负责数据</li>
<li>V 专门负责表现</li>
<li>C 负责其他逻辑</li>
</ol>
<p>如果我们来反思一下，会发现这个分类是无懈可击的：</p>
<ol>
<li>每个网页都有数据</li>
<li>每个网页都有表现（具体为 HTML）</li>
<li>每个网页都有其他逻辑</li>
</ol>
<p>于是乎，MVC 成了经久不衰的设计模式（设计模式就是「套路」的意思）</p>
<p><strong>我们改写一下上面的代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*创建一个model层 负责存储数据、请求数据、更新数据*/</span></span><br><span class="line"><span class="comment">/*因为没有后台，默认bookdata就是从服务器传来的数据，由fethDb获取，saveDb更新 */</span></span><br><span class="line"><span class="keyword">let</span> model = &#123;</span><br><span class="line">    bookData: &#123;</span><br><span class="line">        <span class="string">"id"</span>: <span class="string">"1"</span>,</span><br><span class="line">        <span class="string">"name"</span>: <span class="string">"javascript高程"</span>,</span><br><span class="line">        <span class="string">"number"</span>: <span class="number">2</span> <span class="comment">//数量</span></span><br><span class="line">    &#125;,</span><br><span class="line">    fetchDb() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.bookData;</span><br><span class="line">    &#125;,</span><br><span class="line">    saveDb() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.bookData;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*view层，渲染视图*/</span></span><br><span class="line"><span class="keyword">let</span> view = &#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    template : <span class="string">`</span></span><br><span class="line"><span class="string">    书名&lt;span id="name"&gt;《__name__》&lt;/span&gt;</span></span><br><span class="line"><span class="string">    数量&lt;span id="number"&gt; __number__&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="add"&gt;加一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="minus"&gt;减一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    render(result) &#123; <span class="comment">//此处将showbook改名为render</span></span><br><span class="line">        <span class="keyword">var</span> html = <span class="keyword">this</span>.template.replace(<span class="string">'__name__'</span>, result.name).replace(<span class="string">'__number__'</span>, result.number);</span><br><span class="line">        $(<span class="string">'#app'</span>).html(html)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*控制器，负责调度 model 和 view */</span></span><br><span class="line"><span class="keyword">let</span> controller = &#123;</span><br><span class="line">    init(&#123;model,view&#125;)&#123;</span><br><span class="line">        <span class="keyword">this</span>.model = model</span><br><span class="line">        <span class="keyword">this</span>.view = view</span><br><span class="line">        <span class="keyword">this</span>.view.render(model.fetchDb()) <span class="comment">//渲染模板</span></span><br><span class="line">        <span class="keyword">this</span>.bindEvents()</span><br><span class="line">    &#125;,</span><br><span class="line">    events:[</span><br><span class="line">        &#123;<span class="attr">type</span>:<span class="string">'click'</span>,<span class="attr">selector</span>:<span class="string">'#add'</span>,<span class="attr">fn</span>:<span class="string">'add'</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">type</span>:<span class="string">'click'</span>,<span class="attr">selector</span>:<span class="string">'#minus'</span>,<span class="attr">fn</span>:<span class="string">'minus'</span>&#125;,</span><br><span class="line">    ],</span><br><span class="line">    bindEvents()&#123;</span><br><span class="line">        <span class="keyword">this</span>.events.map(<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">            $(<span class="keyword">this</span>.view.el).on(e.type,e.selector,<span class="keyword">this</span>[e.fn].bind(<span class="keyword">this</span>)) <span class="comment">//事件绑定 注意this需要使用外面的this</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    add() &#123;</span><br><span class="line">        model.bookData.number += <span class="number">1</span></span><br><span class="line">        <span class="keyword">var</span> newdata = model.saveDb(); <span class="comment">//假设更新了，并从服务器获取了修改后的新数据</span></span><br><span class="line">        $(<span class="string">'#number'</span>).text(newdata.number)</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    minus() &#123;</span><br><span class="line">        model.bookData.number -= <span class="number">1</span></span><br><span class="line">        <span class="keyword">var</span> newdata = model.saveDb();</span><br><span class="line">        $(<span class="string">'#number'</span>).text(newdata.number)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">controller.init(&#123;model,view&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="3-模板代码-也就是类"><a href="#3-模板代码-也就是类" class="headerlink" title="3.模板代码(也就是类)"></a>3.模板代码(也就是类)</h2><p>一个页面或模块只需要 model view controller 三个对象<br>第二个页面就需要再来 model2 view2 controller2 三个对象<br>第三个页面就需要再来 model3 view3 controller3 三个对象<br>……<br>第N个页面就需要再来 modelN viewN controllerN 三个对象</p>
<p>你每次写一个 model 都要写很类似的代码<br>你每次写一个 view 都要写很类似的代码<br>你每次写一个 controller 都要写很类似的代码</p>
<p>为什么不利用模板代码（俗称面向对象）把重复的代码写到一个类呢（JS里面就是把「共有属性」放到原型里）</p>
<p>代码如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*创建一个model calss 负责存储数据、请求数据、更新数据*/</span></span><br><span class="line"><span class="comment">/*因为没有后台，默认bookdata就是从服务器传来的数据，由fethDb获取，saveDb更新 */</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Model</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">this</span>.data = options.data || &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    fetchDb()&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.data</span><br><span class="line">    &#125;</span><br><span class="line">    saveDb()&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.data</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> model = <span class="keyword">new</span> Model(&#123;</span><br><span class="line">    data: &#123;</span><br><span class="line">        <span class="string">"id"</span>: <span class="string">"1"</span>,</span><br><span class="line">        <span class="string">"name"</span>: <span class="string">"javascript高程"</span>,</span><br><span class="line">        <span class="string">"number"</span>: <span class="number">2</span> <span class="comment">//数量</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*view class，渲染视图*/</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">View</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">this</span>.el = options.el</span><br><span class="line">        <span class="keyword">this</span>.template = options.template</span><br><span class="line">    &#125;</span><br><span class="line">    render(result)&#123;</span><br><span class="line">        <span class="keyword">var</span> html = <span class="keyword">this</span>.template.replace(<span class="string">'__name__'</span>, result.name).replace(<span class="string">'__number__'</span>, result.number);</span><br><span class="line">        $(<span class="keyword">this</span>.el).html(html)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> view = <span class="keyword">new</span> View(&#123;</span><br><span class="line">    el:<span class="string">'#app'</span>,</span><br><span class="line">    template:<span class="string">`</span></span><br><span class="line"><span class="string">    书名&lt;span id="name"&gt;《__name__》&lt;/span&gt;</span></span><br><span class="line"><span class="string">    数量&lt;span id="number"&gt; __number__&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    &lt;input type="text"&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="add"&gt;加一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="minus"&gt;减一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*控制器 class，负责调度 model 和 view */</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Controller</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(&#123;view ,model , events , init , ...rest&#125;)&#123;</span><br><span class="line">        <span class="keyword">this</span>.view = view</span><br><span class="line">        <span class="keyword">this</span>.model = model</span><br><span class="line">        <span class="keyword">this</span>.events = events</span><br><span class="line">        <span class="built_in">Object</span>.assign(<span class="keyword">this</span>,rest)</span><br><span class="line">        <span class="keyword">this</span>.bindEvents()</span><br><span class="line">        <span class="comment">//this.view.render(this.model.fetchDb())</span></span><br><span class="line">        init.apply()</span><br><span class="line">    &#125;</span><br><span class="line">    bindEvents()&#123;</span><br><span class="line">        <span class="keyword">this</span>.events.map(<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">            $(<span class="keyword">this</span>.view.el).on(e.type,e.selector,<span class="keyword">this</span>[e.fn].bind(<span class="keyword">this</span>)) <span class="comment">//事件绑定 注意this需要使用外面的this</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> controller = <span class="keyword">new</span> Controller(&#123;</span><br><span class="line">    view : view,</span><br><span class="line">    model : model,</span><br><span class="line">    events:[</span><br><span class="line">        &#123;<span class="attr">type</span>:<span class="string">'click'</span>,<span class="attr">selector</span>:<span class="string">'#add'</span>,<span class="attr">fn</span>:<span class="string">'add'</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">type</span>:<span class="string">'click'</span>,<span class="attr">selector</span>:<span class="string">'#minus'</span>,<span class="attr">fn</span>:<span class="string">'minus'</span>&#125;,</span><br><span class="line">    ],</span><br><span class="line">    init()&#123;</span><br><span class="line">        <span class="keyword">this</span>.view.render(<span class="keyword">this</span>.model.fetchDb());</span><br><span class="line">    &#125;,</span><br><span class="line">    add() &#123;</span><br><span class="line">        <span class="keyword">this</span>.model.data.number += <span class="number">1</span></span><br><span class="line">        <span class="keyword">var</span> newdata = <span class="keyword">this</span>.model.saveDb(); <span class="comment">//假设更新了，并从服务器获取了修改后的新数据</span></span><br><span class="line">        <span class="keyword">this</span>.view.render(<span class="keyword">this</span>.model.saveDb());</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    minus() &#123;</span><br><span class="line">        <span class="keyword">this</span>.model.data.number -= <span class="number">1</span></span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">this</span>.model.data.number &lt;<span class="number">0</span>)&#123;</span><br><span class="line">            <span class="keyword">this</span>.model.data.number = <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">var</span> newdata = <span class="keyword">this</span>.model.saveDb();</span><br><span class="line">        <span class="keyword">this</span>.view.render(<span class="keyword">this</span>.model.saveDb());</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>这么写，有一个bug ，每次更新数据，我们都要用 innerHtml 替换 #app里的东西，里面如果有 input 标签，用户的数据就无法保存</strong></p>
<h2 id="4-Vue的双向绑定"><a href="#4-Vue的双向绑定" class="headerlink" title="4.Vue的双向绑定"></a>4.Vue的双向绑定</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*创建一个model calss 负责存储数据、请求数据、更新数据*/</span></span><br><span class="line"><span class="comment">/*因为没有后台，默认bookdata就是从服务器传来的数据，由fethDb获取，saveDb更新 */</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Model</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options) &#123;</span><br><span class="line">        <span class="keyword">this</span>.data = options.data || &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    fetchDb() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.data</span><br><span class="line">    &#125;</span><br><span class="line">    saveDb() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.data</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> model = <span class="keyword">new</span> Model(&#123;</span><br><span class="line">    data: &#123;</span><br><span class="line">        <span class="string">"id"</span>: <span class="string">"1"</span>,</span><br><span class="line">        <span class="string">"name"</span>: <span class="string">"javascript高程"</span>,</span><br><span class="line">        <span class="string">"number"</span>: <span class="number">2</span> <span class="comment">//数量</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*把 View 换成 VUE*/</span></span><br><span class="line"><span class="keyword">var</span> view = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        book: &#123;</span><br><span class="line">            id:<span class="literal">null</span>,</span><br><span class="line">            name: <span class="string">'未命名'</span>,</span><br><span class="line">            number: <span class="number">0</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        n: <span class="number">100</span></span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    书名&lt;span id="name" &gt;&#123;&#123; book.name &#125;&#125;&lt;/span&gt;</span></span><br><span class="line"><span class="string">    数量&lt;span id="number" &gt; &#123;&#123;book.number&#125;&#125;&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    &lt;input type="text" v-model = 'n'&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="add" v-on:click = 'add'&gt;加一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;button id="minus" v-on:click = 'minus'&gt;减一&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    created() &#123;</span><br><span class="line">        </span><br><span class="line">        view.book= model.fetchDb()</span><br><span class="line">       </span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        add() &#123;</span><br><span class="line">            model.data.number += <span class="number">1</span></span><br><span class="line">            <span class="built_in">console</span>.log(model.saveDb().number)</span><br><span class="line">            <span class="keyword">this</span>.book.number = model.saveDb().number; <span class="comment">//假设更新了，并从服务器获取了修改后的新数据</span></span><br><span class="line"></span><br><span class="line">        &#125;,</span><br><span class="line">        minus() &#123;</span><br><span class="line">            model.data.number -= <span class="number">1</span></span><br><span class="line">            <span class="keyword">if</span> (model.data.number &lt; <span class="number">0</span>) &#123;</span><br><span class="line">                model.data.number = <span class="number">0</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">this</span>.book.number = model.saveDb().number;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>Vue 代替了 View，这就是 Vue 的名字和其读音的来历。</p>
<p>Vue 的双向绑定（也是 Angular 的双向绑定）有这些功能：</p>
<ol>
<li>只要 JS 改变了 view.number 或 view.name 或 view.n （注意 Vue 把 data 里面的 number、name 和 n 放到了 view 上面，没有 view.data 这个东西）， HTML 就会局部更新</li>
<li>只要用户在 input 里输入了值，JS 里的 view.n 就会更新。</li>
</ol>
<p>这就像双向绑定：JS 数据与页面元素互相绑定。</p>
<h3 id="Vue的双向绑定原理"><a href="#Vue的双向绑定原理" class="headerlink" title="Vue的双向绑定原理"></a>Vue的双向绑定原理</h3><p>使用了getter setter，缺点是无法监听不存在的属性</p>
<p>原理：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> data = &#123;<span class="attr">name</span>:<span class="string">'aaa'</span>&#125;</span><br><span class="line"><span class="keyword">var</span> _name = <span class="string">'zty'</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(data,<span class="string">'name'</span>,&#123;</span><br><span class="line">  get()&#123;<span class="keyword">return</span> _name&#125;</span><br><span class="line">  set(value)&#123; _name = value ; <span class="built_in">console</span>.log(<span class="string">'更新了name'</span>)&#125; <span class="comment">//在这里做一个拦截，我们就可以知道用户修改了某个值，比如说input</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(data.name)</span><br></pre></td></tr></table></figure>
<p>但是假如之前没有在 <code>data</code>里声明，，vue就无法监听了</p>
<p>强制监听</p>
<p><code>vm.$set()</code></p>
<p>向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 <code>this.myObject.newProperty = &#39;hi&#39;</code>)</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">vm-set</a></p>
<h3 id="模拟上面的set-和-get"><a href="#模拟上面的set-和-get" class="headerlink" title="模拟上面的set 和 get"></a>模拟上面的set 和 get</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">X</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(&#123;data&#125;)&#123;</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> data)&#123;</span><br><span class="line">            <span class="built_in">Object</span>.defineProperty(<span class="keyword">this</span>, key, &#123;</span><br><span class="line">                get ()&#123;</span><br><span class="line">                    <span class="keyword">return</span> data[key]</span><br><span class="line">                &#125;,</span><br><span class="line">                set (value)&#123;</span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">'有人修改了'</span> + key)</span><br><span class="line">                    data[key] = value</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> view = <span class="keyword">new</span> X(&#123;</span><br><span class="line">    data: &#123;</span><br><span class="line">        name: <span class="string">'frank'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(view.name === <span class="string">'frank'</span>) <span class="comment">// 输出 true</span></span><br><span class="line">view.name = <span class="string">'jack'</span> <span class="comment">// 输出「有人修改了 name」</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-重构" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="3404a532.html">重构</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="3404a532.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-代码优化基本原则"><a href="#1-代码优化基本原则" class="headerlink" title="1.代码优化基本原则"></a>1.代码优化基本原则</h3><p>1.易读性优先</p>
<p>2.如果不是性能瓶颈，就不要为了性能改代码</p>
<p>3.复杂性守恒原则：无论你怎么写代码，复杂性都是不会消失的<br>推论：如果逻辑很复杂，那么代码看起来就应该是复杂的。如果逻辑很简单，代码看起来就应该是简单的。</p>
<h3 id="2-命名"><a href="#2-命名" class="headerlink" title="2.命名"></a>2.命名</h3><p><strong>程序员三大难题</strong></p>
<ol>
<li>变量命名</li>
<li>缓存失效</li>
<li>循环边界</li>
</ol>
<p>可见变量命名的重要性。</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">网上有很多命名规范</a>，大家可以参考。这里只讲基本原则。</p>
<ol>
<li><p>注意词性</p>
<ul>
<li><p>普通变量/属性用「名词」</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">    name: <span class="string">'Frank'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> student = &#123;</span><br><span class="line">    grade: <span class="number">3</span>,</span><br><span class="line">    class: 2</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>bool变量/属性用「形容词」或者「be动词」或者「情态动词」或者「hasX」</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">    dead: <span class="literal">false</span>, <span class="comment">// 如果是形容词，前面就没必要加 is，比如isDead 就很废话</span></span><br><span class="line">    canSpeak: <span class="literal">true</span>, <span class="comment">//情态动词有 can、should、will、need 等，情态动词后面接动词</span></span><br><span class="line">    isVip: <span class="literal">true</span>, <span class="comment">// be 动词有 is、was 等，后面一般接名词</span></span><br><span class="line">    hasChildren: <span class="literal">true</span>, <span class="comment">// has 加名词</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>普通函数/方法用「动词」开头</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">    run()&#123;&#125;, <span class="comment">// 不及物动词</span></span><br><span class="line">    drinkWater()&#123;&#125;, <span class="comment">// 及物动词</span></span><br><span class="line">    eat(foo)&#123;&#125;, <span class="comment">// 及物动词加参数（参数是名词）</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>回调、钩子函数用「介词」开头，或用「动词的现在完成时态」</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">    beforeDie()&#123;&#125;,</span><br><span class="line">    afterDie()&#123;&#125;,</span><br><span class="line">    <span class="comment">// 或者</span></span><br><span class="line">    willDie()&#123;&#125;</span><br><span class="line">    dead()&#123;&#125; <span class="comment">// 这里跟 bool 冲突，你只要不同时暴露 bool dead 和函数 dead 就行，怕冲突就用上面的 afterDie</span></span><br><span class="line">&#125;</span><br><span class="line">button.addEventListener(<span class="string">'click'</span>, onButtonClick)</span><br><span class="line"><span class="keyword">var</span> component = &#123;</span><br><span class="line">    beforeCreate()&#123;&#125;,</span><br><span class="line">    created()&#123;&#125;,</span><br><span class="line">    beforeMount()&#123;&#125;,</span><br><span class="line">    mounted()&#123;&#125;,</span><br><span class="line">    beforeUpdate()&#123;&#125;,</span><br><span class="line">    updated()&#123;&#125;,</span><br><span class="line">    activated()&#123;&#125;,</span><br><span class="line">    deactivated()&#123;&#125;,</span><br><span class="line">    beforeDestroy()&#123;&#125;,</span><br><span class="line">    destroyed()&#123;&#125;,</span><br><span class="line">    errorCaptured()&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>容易混淆的地方加前缀</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div1.classList.add(<span class="string">'active'</span>) <span class="comment">// DOM 对象</span></span><br><span class="line">div2.addClass(<span class="string">'active'</span>) <span class="comment">// jQuery 对象</span></span><br><span class="line">不如改成</span><br><span class="line">domDiv1 或 elDiv1.classList.add(<span class="string">'active'</span>)</span><br><span class="line">$div2.addClass(<span class="string">'active'</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>属性访问器函数可以用名词</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$div.text() <span class="comment">// 其实是 $div.getText()</span></span><br><span class="line">$div.text(<span class="string">'hi'</span>) <span class="comment">// 其实是 $div.setText('hi')</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>注意一致性</p>
<ul>
<li><p>介词一致性<br>如果你使用了 before + after，那么就在代码的所有地方都坚持使用<br>如果你使用了 before + 完成时，那么就坚持使用<br>如果你改来改去，就「不一致」了，不一致将导致「不可预测」</p>
</li>
<li><p>顺序一致性<br>比如 updateContainerWidth 和 updateHeightOfContainer 的顺序就令人很别扭，同样会引发「不可预测」</p>
</li>
<li><p>表里一致性<br>函数名必须完美体现函数的功能，既不能多也不能少。<br>比如</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSongs</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> $.get(<span class="string">'/songs).then((response)&#123;</span></span><br><span class="line"><span class="string">        div.innerText = response.songs</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>
<p>就违背了表里一致性，getSongs 表示获取歌曲，并没有暗示这个函数会更新页面，但是实际上函数更新了 div，这就是表里不一，正确的写法是</p>
<ul>
<li><p>要么纠正函数名</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSongsAndUpdateDiv</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> $.get(<span class="string">'/songs).then((response)&#123;</span></span><br><span class="line"><span class="string">        div.innerText = response.songs</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>要么写成两个函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSongs</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> $.get(<span class="string">'/songs)</span></span><br><span class="line"><span class="string">&#125;</span></span><br><span class="line"><span class="string">function updateDiv(songs)&#123;</span></span><br><span class="line"><span class="string">    div.innerText = response.songs</span></span><br><span class="line"><span class="string">&#125;</span></span><br><span class="line"><span class="string">getSongs().then((response)=&gt;&#123;</span></span><br><span class="line"><span class="string">    updateDiv(response.songs)</span></span><br><span class="line"><span class="string">&#125;)</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>时间一致性<br>有可能随着代码的变迁，一个变量的含义已经不同于它一开始的含义了，这个时候你需要及时改掉这个变量的名字。<br>这一条是最难做到的，因为写代码容易，改代码难。如果这个代码组织得不好，很可能会出现牵一发而动全身的情况（如全局变量就很难改）</p>
</li>
</ul>
</li>
</ol>
<h2 id="改代码"><a href="#改代码" class="headerlink" title="改代码"></a>改代码</h2><p>如果你的代码有单元测试，那么改起来就很放心。如果没有单元测试，就需要用「小步快跑」的策略来修改。</p>
<p>小步快跑的意思是说，每次只修改一点点，测试通过后，再修改一点点，再测试，再修改一点点……如此反复。</p>
<p>那么如何修改一点点呢？《重构》这本书介绍了很多方法，但是讲得挺啰嗦的，如果你有时间可以看看。</p>
<p>我这里只说两个经久不衰的方法。</p>
<h3 id="一、使用函数来改代码"><a href="#一、使用函数来改代码" class="headerlink" title="一、使用函数来改代码"></a>一、使用函数来改代码</h3><p>步骤：</p>
<ol>
<li>将一坨代码放到一个函数里</li>
<li>将代码依赖的外部变量作为参数</li>
<li>将代码的输出作为函数的返回值</li>
<li>给函数取一个合适的名字</li>
<li>调用这个函数并传入参数</li>
<li>这个函数里的代码如果超过 5 行，则依然有优化的空间，请回到第 1 步</li>
</ol>
<h3 id="二、使用对象来改代码"><a href="#二、使用对象来改代码" class="headerlink" title="二、使用对象来改代码"></a>二、使用对象来改代码</h3><p>如果使用了函数改造法改造后，发现有太多的小函数，则可以使用对象讲这个函数串起来。</p>
<p>记得我们讲过「this 是函数和对象的桥梁」吗，我们会用 this 来串联这个对象和所有函数。</p>
<p>最终代码：<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">http://js.jirengu.com/mimazaboke/1/edit?html,js,output</a></p>
<h3 id="一些固定的套路"><a href="#一些固定的套路" class="headerlink" title="一些固定的套路"></a>一些固定的套路</h3><ol>
<li><p>表驱动编程（《代码大全》里说的）<br>所有一一对应的关系都可以用表来做</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//传入分数，返回等级</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">calculateGrade</span>(<span class="params">score</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(score&gt;=<span class="number">90</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'A'</span></span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(score&gt;=<span class="number">80</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'B'</span></span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(score&gt;=<span class="number">70</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'C'</span></span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(score&gt;=<span class="number">60</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'D'</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'E'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//表驱动编程</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">calculateGrade</span>(<span class="params">score</span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">var</span> table = &#123;</span><br><span class="line">        <span class="number">10</span> : <span class="string">'A'</span>,</span><br><span class="line">        <span class="number">9</span> : <span class="string">'A'</span>,</span><br><span class="line">        <span class="number">8</span> : <span class="string">'B'</span>,</span><br><span class="line">        <span class="number">7</span> : <span class="string">'C'</span>,</span><br><span class="line">        <span class="number">6</span> : <span class="string">'D'</span>,</span><br><span class="line">        others : <span class="string">'E'</span>,</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> level = <span class="built_in">parseInt</span>(score/<span class="number">10</span> , <span class="number">10</span>)</span><br><span class="line">    <span class="keyword">return</span> table[level] || table[<span class="string">'others'</span>] </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//同样也是表驱动编程</span></span><br><span class="line"><span class="comment">//提供数据，提供对应关系，然后我在通过一些方法，一些循环搞定，不需要每个都写函数、</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pre</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">next</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cleartimer</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resettimer</span>(<span class="params"></span>)</span>&#123;&#125; <span class="comment">//四个事件需要绑定到几个元素上</span></span><br><span class="line"><span class="keyword">var</span> events = [</span><br><span class="line">  &#123;<span class="attr">el</span>:<span class="string">'.prebtn'</span>,<span class="attr">event</span>:<span class="string">'click'</span>,<span class="attr">fn</span>:pre&#125;,</span><br><span class="line">  &#123;<span class="attr">el</span>:<span class="string">'.nextbtn'</span>,<span class="attr">event</span>:<span class="string">'click'</span>,<span class="attr">fn</span>:next&#125;,</span><br><span class="line">  &#123;<span class="attr">el</span>:<span class="string">'.timer'</span>,<span class="attr">event</span>:<span class="string">'mouseenter'</span>,<span class="attr">fn</span>:cleartimer&#125;,</span><br><span class="line">  &#123;<span class="attr">el</span>:<span class="string">'.timer'</span>,<span class="attr">event</span>:<span class="string">'mouseleave'</span>,<span class="attr">fn</span>:resettimer&#125;,</span><br><span class="line">];</span><br><span class="line">events.forEach(<span class="function">(<span class="params">eventobject</span>)=&gt;</span>&#123;</span><br><span class="line">  $(eventobject.el).on(eventobject.event,eventobject.fn)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>自说明代码（以 API 参数为例）<br>把别人关心的东西放在显眼的位置</p>
</li>
</ol>
<h2 id="bad-smell（坏味道）"><a href="#bad-smell（坏味道）" class="headerlink" title="bad smell（坏味道）"></a>bad smell（坏味道）</h2><p>有些代码可以用，但是很「臭」。</p>
<p>哪些代码是有坏味道的</p>
<ol>
<li>表里不一的代码</li>
<li>过时的注释</li>
<li>逻辑很简单，但是看起来很复杂的代码</li>
<li>重复的代码</li>
<li>相似的代码</li>
<li>总是一起出现的代码</li>
</ol>
<h2 id="破窗效应"><a href="#破窗效应" class="headerlink" title="破窗效应"></a>破窗效应</h2><blockquote>
<p>此理论认为环境中的不良现象如果被放任存在，会诱使人们仿效，甚至变本加厉。一幢有少许破窗的建筑为例，如果那些窗不被修理好，可能将会有破坏者破坏更多的窗户。最终他们甚至会闯入建筑内，如果发现无人居住，也许就在那里定居或者纵火。一面墙，如果出现一些涂鸦没有被清洗掉，很快的，墙上就布满了乱七八糟、不堪入目的东西；一条人行道有些许纸屑，不久后就会有更多垃圾，最终人们会视若理所当然地将垃圾顺手丢弃在地上。这个现象，就是犯罪心理学中的破窗效应。</p>
</blockquote>
<p>程序员要做到：只要是经过你手的代码，都会比之前好一点。</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Http" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="a1ede006.html">HTTP</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="a1ede006.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h2><h3 id="1-HTTP为什么重要"><a href="#1-HTTP为什么重要" class="headerlink" title="1.HTTP为什么重要"></a>1.HTTP为什么重要</h3><ol>
<li>HTTP 是前后端合作的重要方式<br>99%的需求都是通过 HTTP 做到，小部分需求可以通过 WebSockets 做到。</li>
<li>HTTP 能帮你从本质上理解 HTML、CSS、JS、图片、JSON、JSONP 等不同形式的资源</li>
<li>Web 性能优化基本等价于对 HTTP 传输效率优化</li>
<li>前端工程化需要你对 HTTP 缓存有深入了解</li>
</ol>
<h3 id="2-什么是HTTP"><a href="#2-什么是HTTP" class="headerlink" title="2.什么是HTTP"></a>2.什么是HTTP</h3><p>####1.四个概念</p>
<ol>
<li>server</li>
<li>client</li>
<li>request</li>
<li>response</li>
</ol>
<ul>
<li><p>server</p>
<p>服务器端</p>
</li>
<li><p>client</p>
<p>客户端</p>
</li>
</ul>
<h4 id="2-request-请求"><a href="#2-request-请求" class="headerlink" title="2.request 请求"></a>2.request 请求</h4><p>请求包含四个部分</p>
<ol>
<li><p>动词  路径  协议/版本号  — GET ./style.css  HTTP/1.1</p>
</li>
<li><p>一些 key : value ，用回车分割</p>
<p>Host : xxx.xxx.xxx</p>
<p>Connection : keep-alive</p>
<p>Content-Type : application/javascript</p>
<p>User-Agent : xxxxxxxxxxx</p>
<p>Accept : xxxxx</p>
</li>
<li><p>回车，作用：分割第二部分和第三部分</p>
</li>
<li><p>什么都行，但是内容的格式必须要在第二部分的 <code>Content-Type</code>中声明</p>
</li>
</ol>
<h4 id="3-response-响应"><a href="#3-response-响应" class="headerlink" title="3.response 响应"></a>3.response 响应</h4><p>响应也包含四个部分</p>
<ol>
<li>协议/版本号 状态码 状态信息  HTTP/1.1 200 OK</li>
<li>一些 key : value ，用回车分割</li>
<li>回车，作用：分割第二部分和第三部分</li>
<li>什么都行，但是内容的格式必须要在第二部分的 <code>Content-Type</code>中声明</li>
</ol>
<h3 id="3-HTML-CSS-JS-JSON-JSONP都是什么？"><a href="#3-HTML-CSS-JS-JSON-JSONP都是什么？" class="headerlink" title="3.HTML,CSS,JS,JSON,JSONP都是什么？"></a>3.HTML,CSS,JS,JSON,JSONP都是什么？</h3><h4 id="1-HTML，CSS，JS的本质"><a href="#1-HTML，CSS，JS的本质" class="headerlink" title="1.HTML，CSS，JS的本质"></a>1.HTML，CSS，JS的本质</h4><p>本质是字符串，只是 <code>Content-Type</code>不同</p>
<ul>
<li>HTML  Content-Type : text/html</li>
<li>CSS      Content-Type : text/css</li>
<li>JS          Content-Type : application/javascript</li>
</ul>
<p>注意 url 里的后缀是废话，毫无意义。</p>
<ol>
<li>浏览器通过地址栏、iframe 来请求 HTML</li>
<li>浏览器通过 link 标签获取 CSS，然后渲染</li>
<li>浏览器通过 script 标签获取 JS，然后执行</li>
<li>浏览器通过 image 标签获取图片，然后展示</li>
</ol>
<h4 id="2-JSON"><a href="#2-JSON" class="headerlink" title="2.JSON"></a>2.JSON</h4><p>json也是字符串</p>
<p>JSON Content-Type : application/json</p>
<h4 id="3-JSONP"><a href="#3-JSONP" class="headerlink" title="3.JSONP"></a>3.JSONP</h4><p>本质就是字符串，只不过</p>
<ol>
<li>Content-Type 为application/javascript 或者 text/javascript</li>
<li>内容格式为 <code>functionName( {&quot;format&quot;: &quot;JSON&quot;} )</code></li>
</ol>
<h3 id="4-缓存"><a href="#4-缓存" class="headerlink" title="4.缓存"></a>4.缓存</h3><ol>
<li>使用 Cache-Control 缓存是常用的缓存方式</li>
<li>想要更新缓存只需稍微变更一下 url<ol>
<li>app-2131312362387123.js</li>
<li>app.js?v=1</li>
<li>app.js?t=201801012334</li>
<li>不要缓存入口页面，这是你更新资源的唯一入口</li>
</ol>
</li>
</ol>
<p><strong>并不是缓存</strong></p>
<p>Etag 和 304 会避免下载，但是还是会发出请求，并不属于缓存</p>
<h3 id="5-Cookie-和-Session"><a href="#5-Cookie-和-Session" class="headerlink" title="5.Cookie 和 Session"></a>5.Cookie 和 Session</h3><h4 id="1-Cookie"><a href="#1-Cookie" class="headerlink" title="1.Cookie"></a>1.Cookie</h4><p>因为HTTP协议是 <strong>无状态</strong> 的，通俗来说是 <strong>没脑子</strong>，它没有记忆。</p>
<p>假如用户登录成功后，刷新页面，用户的登录状态就没有了，这里可以用 Cookie 解决。</p>
<p><strong>保存登录状态</strong></p>
<p>jack登录a.com发出请求 uername:jack ; password : 123 —-&gt;  </p>
<p>后台接收到数据，账号密码正确，发出响应，响应头<code>header</code>写上<code>&#39;Set-Cookie&#39;,&#39;login = jack&#39;</code>—–&gt;</p>
<p>浏览器收到响应，种上 Cookie  —-&gt;</p>
<p>当jack再次访问a.com的其他页面时候，请求头中会带上<code>Cookie : login=jack</code>——&gt;</p>
<p>jack发现他还是登录状态，非常高兴 : ) —– end</p>
<p><strong>区分用户</strong></p>
<p>frank 这时候也登录 a.com 这时候他获得的 响应头就是<code>&#39;Set-Cookie&#39;,&#39;login = frank&#39;</code>了，这样我们也能区分jack 和 frank 了</p>
<p>但是<code>Cookie</code>有一个很不安全的地方，任何一个前端都可以使用<code>document.cookie = xxx</code>来伪造。</p>
<p><strong>我们需要一个方法既需要能标识用户，又可以防止前端伪造</strong></p>
<h4 id="2-Session"><a href="#2-Session" class="headerlink" title="2.Session"></a>2.Session</h4><p>因为<code>Cookie</code>不安全，所以出现了<code>Session</code>。</p>
<p><code>Session</code>是存在数据库的，因此前端无法修改。</p>
<p><strong>流程</strong></p>
<p>用户输入账户密码登录 ——&gt;  发送请求 ———&gt; 服务器验证账户密码正确———&gt; </p>
<p><strong>分配一个<code>session</code>，通过<code>cookie</code>告诉浏览器</strong>———&gt;<code>Set-Cookie,sessionId = &#39;xxxxxxxxxxxxx&#39;</code></p>
<p>剩下的就是和<code>Cookie</code>一样了。</p>
<h4 id="3-两者不同"><a href="#3-两者不同" class="headerlink" title="3.两者不同"></a>3.两者不同</h4><ol>
<li>使用时间：用Cookie分辨两个不同的用户，用Session存放用户的敏感数据。</li>
<li>实现方式：Cookie使用Set-Cookie实现，Session你想怎么实现就怎么实现。</li>
<li>存放方式：Cookie存放在浏览器里，Session存在服务器端的文件，数据库，内存等等。</li>
<li>两者关系：Session一般基于Cookie，存在里面。但也可以放到 localStorage 里面，放到 URL 里等等</li>
</ol>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Vue-动画" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="6a317f77.html">Vue 动画</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="6a317f77.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Vue动画"><a href="#Vue动画" class="headerlink" title="Vue动画"></a>Vue动画</h3><h4 id="1-简单例子"><a href="#1-简单例子" class="headerlink" title="1.简单例子"></a>1.简单例子</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    show: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter-active</span>, <span class="selector-class">.fade-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter</span>, <span class="selector-class">.fade-leave-to</span> <span class="comment">/* .fade-leave-active below version 2.1.8 */</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>该例子可以实现 p 标签的渐隐效果。</p>
<h4 id="2-使用CSS添加稍微多一点动画"><a href="#2-使用CSS添加稍微多一点动画" class="headerlink" title="2.使用CSS添加稍微多一点动画"></a>2.使用CSS添加稍微多一点动画</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.test</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>:<span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter-active</span>,<span class="selector-class">.slide-leave-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>:all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">translateX</span>(100px)</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-leave-to</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">translateX</span>(-100px)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>实现了一个类似轮播感觉的动画。</p>
<h5 id="使用-animation"><a href="#使用-animation" class="headerlink" title="# 使用 animation"></a># 使用 animation</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.test</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">2s</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">2s</span> reverse</span><br><span class="line">&#125;</span><br><span class="line">@<span class="keyword">keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(0)</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(2)</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>一个 Scale-in-out 的动画效果</p>
<h4 id="3-使用-Animate-css"><a href="#3-使用-Animate-css" class="headerlink" title="3.使用 Animate.css"></a>3.使用 Animate.css</h4><p>动画这个东西写起来还是比较复杂的，但是有大牛帮我们写好了。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--  &lt;link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet"&gt; --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"visable = !visable"</span>&gt;</span></span><br><span class="line">      Toggle</span><br><span class="line">    <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> </span></span><br><span class="line"><span class="tag">                <span class="attr">name</span>=<span class="string">"custom-classes-transition"</span> </span></span><br><span class="line"><span class="tag">                <span class="attr">enter-active-class</span>=<span class="string">"animated tada"</span> </span></span><br><span class="line"><span class="tag">                <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOutRight"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">test</span> <span class="attr">v-if</span>=<span class="string">"visable"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这样不用写 CSS 了，这里的 name 可写可不写。</p>
<p>但是标签里的 <strong>过度类名</strong> 和之前不一样了:</p>
<ul>
<li><code>enter-class</code></li>
<li><code>enter-active-class</code></li>
<li><code>enter-to-class</code> (2.1.8+)</li>
<li><code>leave-class</code></li>
<li><code>leave-active-class</code></li>
<li><code>leave-to-class</code> (2.1.8+)</li>
</ul>
<p>各种效果预览:</p>
<h4 id="4-使用-JavaScript-钩子"><a href="#4-使用-JavaScript-钩子" class="headerlink" title="4.使用 JavaScript 钩子"></a>4.使用 JavaScript 钩子</h4><p>有时候我们需要在动画的过程中做一些事情，这就需要钩子函数了。</p>
<p>首先在属性中声明钩子:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:before-enter</span>=<span class="string">"beforeEnter"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:enter</span>=<span class="string">"enter"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:after-enter</span>=<span class="string">"afterEnter"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:enter-cancelled</span>=<span class="string">"enterCancelled"</span></span></span><br><span class="line"><span class="tag"></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:before-leave</span>=<span class="string">"beforeLeave"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:leave</span>=<span class="string">"leave"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:after-leave</span>=<span class="string">"afterLeave"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:leave-cancelled</span>=<span class="string">"leaveCancelled"</span></span></span><br><span class="line"><span class="tag">&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- ... --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>然后在实例中的 methods 中：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">methods: &#123;</span><br><span class="line">  <span class="comment">// --------</span></span><br><span class="line">  <span class="comment">// 进入中</span></span><br><span class="line">  <span class="comment">// --------</span></span><br><span class="line"></span><br><span class="line">  beforeEnter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 此回调函数是可选项的设置</span></span><br><span class="line">  <span class="comment">// 与 CSS 结合时使用</span></span><br><span class="line">  enter: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    done()</span><br><span class="line">  &#125;,</span><br><span class="line">  afterEnter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line">  enterCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// --------</span></span><br><span class="line">  <span class="comment">// 离开时</span></span><br><span class="line">  <span class="comment">// --------</span></span><br><span class="line"></span><br><span class="line">  beforeLeave: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 此回调函数是可选项的设置</span></span><br><span class="line">  <span class="comment">// 与 CSS 结合时使用</span></span><br><span class="line">  leave: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    done()</span><br><span class="line">  &#125;,</span><br><span class="line">  afterLeave: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// leaveCancelled 只用于 v-show 中</span></span><br><span class="line">  leaveCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>当<strong>只用 JavaScript 过渡</strong>的时候，<strong>在 enter 和 leave 中必须使用 done 进行回调</strong>。</p>
<p>否则，它们将被同步调用，过渡会立即完成。</p>
<h5 id="使用-Velocity-js"><a href="#使用-Velocity-js" class="headerlink" title="# 使用 Velocity.js"></a># 使用 Velocity.js</h5><p>这是一个很出名的使用 JavaScript 做动画的库，与其自己写，不如直接用他的。</p>
<p>(当然，我们一般用CSS )</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example-4"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-on:before-enter</span>=<span class="string">"beforeEnter"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-on:enter</span>=<span class="string">"enter"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-on:leave</span>=<span class="string">"leave"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-bind:css</span>=<span class="string">"false"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"show"</span>&gt;</span></span><br><span class="line">      Demo</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#example-4'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    show: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    beforeEnter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">      el.style.opacity = <span class="number">0</span></span><br><span class="line">      el.style.transformOrigin = <span class="string">'left'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    enter: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">      Velocity(el, &#123; <span class="attr">opacity</span>: <span class="number">1</span>, <span class="attr">fontSize</span>: <span class="string">'1.4em'</span> &#125;, &#123; <span class="attr">duration</span>: <span class="number">300</span> &#125;)</span><br><span class="line">      Velocity(el, &#123; <span class="attr">fontSize</span>: <span class="string">'1em'</span> &#125;, &#123; <span class="attr">complete</span>: done &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    leave: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">      Velocity(el, &#123; <span class="attr">translateX</span>: <span class="string">'15px'</span>, <span class="attr">rotateZ</span>: <span class="string">'50deg'</span> &#125;, &#123; <span class="attr">duration</span>: <span class="number">600</span> &#125;)</span><br><span class="line">      Velocity(el, &#123; <span class="attr">rotateZ</span>: <span class="string">'100deg'</span> &#125;, &#123; <span class="attr">loop</span>: <span class="number">2</span> &#125;)</span><br><span class="line">      Velocity(el, &#123;</span><br><span class="line">        rotateZ: <span class="string">'45deg'</span>,</span><br><span class="line">        translateY: <span class="string">'30px'</span>,</span><br><span class="line">        translateX: <span class="string">'30px'</span>,</span><br><span class="line">        opacity: <span class="number">0</span></span><br><span class="line">      &#125;, &#123; <span class="attr">complete</span>: done &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="5-多个元素的过度"><a href="#5-多个元素的过度" class="headerlink" title="5.多个元素的过度"></a>5.多个元素的过度</h4><p>上面我们一直在写单个元素的动画，涉及到多个元素，该如何操作呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    status: <span class="string">'on'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">'slide'</span> <span class="attr">mode</span> = <span class="string">"out-in"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-if</span>=<span class="string">"status === 'off'"</span> <span class="attr">key</span>=<span class="string">"on"</span> @<span class="attr">click</span>=<span class="string">"status='on'"</span>&gt;</span>on<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-else</span>=<span class="string">"status === 'on'"</span> <span class="attr">key</span>=<span class="string">"off"</span> @<span class="attr">click</span>=<span class="string">"status='off'"</span>&gt;</span>off<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>name</code> : 类名</li>
<li><code>mode</code> : <code>in-out</code>, <code>out-in</code> </li>
<li><code>key</code>: 两个元素的时候一定要加上 <code>key</code> 属性，里面写啥不重要，但是一定要写上，并且不重复</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#demo</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter-active</span>,</span><br><span class="line"><span class="selector-class">.slide-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(100px)</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-100px)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-组件之间的过度"><a href="#6-组件之间的过度" class="headerlink" title="6.组件之间的过度"></a>6.组件之间的过度</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"temp='v-a'"</span>&gt;</span>A<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"temp='v-b'"</span>&gt;</span>B<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">'slide'</span> <span class="attr">mode</span>=<span class="string">"out-in"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">component</span> <span class="attr">v-bind:is</span>=<span class="string">'temp'</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    temp: <span class="string">'v-a'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    <span class="string">'v-a'</span>: &#123;</span><br><span class="line">      template: <span class="string">'&lt;div&gt;Component A&lt;/div&gt;'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">'v-b'</span>: &#123;</span><br><span class="line">      template: <span class="string">'&lt;div&gt;Component B&lt;/div&gt;'</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.slide-enter-active</span>,</span><br><span class="line"><span class="selector-class">.slide-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-enter</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(100px)</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.slide-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-100px)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>组件之间的过度不需要 <code>key</code></p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-css-宽度高度，对齐" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="422899b1.html">CSS-宽度高度，对齐</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="422899b1.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><p><strong>记住：能不用 height width 就不用他们，使用 padding ,  line-height 来替代</strong></p>
<h4 id="1-中文对齐"><a href="#1-中文对齐" class="headerlink" title="1.中文对齐"></a>1.中文对齐</h4><ul>
<li>当我要写一个表单，有<strong>姓名</strong>和<strong>联系方式</strong>，需要姓和联对齐，名和式对齐。如何去做？</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>联系方式<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">5em</span>;</span><br><span class="line">    <span class="attribute">text-align</span>:justify;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>:hidden</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>当我有很多文字，靠到最右边要换行了，发现文字和最右边有间距怎么办?</p>
<p><code>text-align:justify</code></p>
</li>
</ul>
<h4 id="2-空格问题"><a href="#2-空格问题" class="headerlink" title="2.空格问题"></a>2.空格问题</h4><p>HTML会把两个 inline 元素之间看不见的字符都替换为一个空格，包括空格、TAB、回车。</p>
<p>所以有时候就会莫名其妙中间多一个空格，因为代码里有回车。</p>
<p><strong>解决方法：不用 inline 元素。</strong></p>
<h4 id="3-清除浮动"><a href="#3-清除浮动" class="headerlink" title="3.清除浮动"></a>3.清除浮动</h4><p>在浮动元素的爸爸身上加一个 class </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">clearfix</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line">    <span class="attribute">display</span>:block;</span><br><span class="line">    <span class="attribute">clear</span>:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-文字中断"><a href="#4-文字中断" class="headerlink" title="4.文字中断"></a>4.文字中断</h4><p>有时候文字太长了超出屏幕了，两种解决方式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>helooooooooooooooooooooooooooooooooooooooooooooooooo<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>上面这种情况下浏览器会认为这是一个单词，一个单词是不会自动换行的。</p>
<p>可以加分隔符</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>helooooooo-ooooooooo-ooooooooo-oooooooo-ooooooo-ooooo-oooo<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>可以使用 word-break</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> &#123; <span class="attribute">word-break</span>:break-all &#125;</span><br></pre></td></tr></table></figure>
<h4 id="5-文字溢出省略"><a href="#5-文字溢出省略" class="headerlink" title="5.文字溢出省略"></a>5.文字溢出省略</h4><p>当文字的长度超出了 div 的宽度，多余的部分，我们想用省略号代替。</p>
<ul>
<li>一行的时候</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">white-space</span>:nowrap; </span><br><span class="line">    <span class="attribute">overflow</span>:hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>:ellipsis;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>多行</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">      <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">      <span class="attribute">-webkit-line-clamp</span>: <span class="number">3</span>;   <span class="comment">/*3行写3，n行写n */</span></span><br><span class="line">      <span class="attribute">-webkit-box-orient</span>: vertical;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-文字垂直居中"><a href="#6-文字垂直居中" class="headerlink" title="6.文字垂直居中"></a>6.文字垂直居中</h4><p>Div 的高度是跟随你文字的行数变化的，所以永远不要使用 height 给 Div 高度</p>
<p>那假如我想要 div 的高度是40px , 怎么办？ 使用 line-height 和 padding </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">line-height</span>:<span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">padding</span>:<span class="number">8px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">text-align</span>:center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>24 + 8+ 8 = 40</p>
<h4 id="7-margin-合并"><a href="#7-margin-合并" class="headerlink" title="7.margin 合并"></a>7.margin 合并</h4><p>当子元素有 margin 的时候， 父元素如果没有“挡住”它的属性，那么就会出现父子margin 合并。</p>
<p>解决方案 border/ padding/ overflow(不推荐)</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dad</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>:<span class="number">0.1px</span> solid white;</span><br><span class="line">    <span class="attribute">padding</span>:<span class="number">0.1px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>:hidden</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="8-div-的高度怎么确定的？"><a href="#8-div-的高度怎么确定的？" class="headerlink" title="8.div 的高度怎么确定的？"></a>8.div 的高度怎么确定的？</h4><p>div 的高度是由<strong>文档流</strong>中所有素高度的总和<strong>决定</strong>的。</p>
<p>文档流：内联元素从左到右，块级元素从上到下，块级元素总是另起一行。</p>
<p>所以脱离文档流的翻译就是：算高度别算我。（position:absolute,fixed ;  float; ）</p>
<h4 id="9-内联元素的宽度和高度"><a href="#9-内联元素的宽度和高度" class="headerlink" title="9.内联元素的宽度和高度"></a>9.内联元素的宽度和高度</h4><p>宽度是受 文字的多少 和 margin padding boder 影响。</p>
<p>高度只受行高决定。</p>
<h4 id="10-DIV水平垂直居中"><a href="#10-DIV水平垂直居中" class="headerlink" title="10.DIV水平垂直居中"></a>10.DIV水平垂直居中</h4><p>高度不定，宽度不定的div水平垂直居中 flex </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dad</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>:flex;</span><br><span class="line">    <span class="attribute">justify-content</span>:center;</span><br><span class="line">    <span class="attribute">align-items</span>:center</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="11-写一个-1-1-的-div"><a href="#11-写一个-1-1-的-div" class="headerlink" title="11.写一个 1:1 的 div"></a>11.写一个 1:1 的 div</h4><p>使用padding撑起高度。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.one</span>&#123;</span><br><span class="line">    <span class="attribute">padding-top</span>:<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-css-堆叠上下文" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="81ea01b1.html">CSS-堆叠上下文</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="81ea01b1.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="堆叠上下文"><a href="#堆叠上下文" class="headerlink" title="堆叠上下文"></a>堆叠上下文</h3><h4 id="1-堆叠顺序"><a href="#1-堆叠顺序" class="headerlink" title="1.堆叠顺序"></a>1.堆叠顺序</h4><p>div是有空间层次关系的。</p>
<p>原则：相同类型的元素，后出现的会覆盖之前的。</p>
<p>层次顺序（底层-上层）： </p>
<ol>
<li>background</li>
<li>border</li>
<li>块级</li>
<li>浮动</li>
<li>内联</li>
<li>z-index : 0 ( position :relative , absolute)</li>
<li>z-index :  +</li>
</ol>
<p>注意：z-index 只有在 position 不是 static 的时候才有用，比如 relative , absolute</p>
<h4 id="2-怎么样形成堆叠上下文"><a href="#2-怎么样形成堆叠上下文" class="headerlink" title="2.怎么样形成堆叠上下文"></a>2.怎么样形成堆叠上下文</h4><p>可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。</p>
<ul>
<li><strong>根元素 (HTML),</strong></li>
<li><strong>z-index 值不为 “auto”的 绝对/相对定位，</strong></li>
<li><strong>一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，</strong></li>
<li><strong>opacity 属性值小于 1 的元素（参考 the specification for opacity），</strong></li>
<li><strong>transform 属性值不为 “none”的元素，</strong></li>
<li>mix-blend-mode 属性值不为 “normal”的元素，</li>
<li>filter值不为“none”的元素，</li>
<li>perspective值不为“none”的元素，</li>
<li>isolation 属性被设置为 “isolate”的元素，</li>
<li><strong>position: fixed</strong></li>
<li>在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）</li>
<li>-webkit-overflow-scrolling 属性被设置 “touch”的元素</li>
</ul>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-单元测试" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="cef93ee3.html">单元测试</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="cef93ee3.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="单元测试"><a href="#单元测试" class="headerlink" title="单元测试"></a>单元测试</h2><h3 id="1-BDD-amp-amp-TDD"><a href="#1-BDD-amp-amp-TDD" class="headerlink" title="1.BDD&amp;&amp;TDD"></a>1.BDD&amp;&amp;TDD</h3><ol>
<li><p>BDD( Behavior-Driven-Development ):行为驱动开发 , 主要是设计一些行为,进行对代码的测试</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">describe(<span class="string">'Button'</span>,()=&gt;&#123;  <span class="comment">//Mocha语法,下面会介绍Mocha</span></span><br><span class="line">  it(<span class="string">'存在'</span>,()=&gt;&#123;</span><br><span class="line">    <span class="comment">//测试</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样的写法,我们甚至可以读出来, <strong>描述</strong> Button , <strong>它</strong>存在. </p>
</li>
<li><p>TDD(Test-Driven-Development): 测试驱动开发,自动化单元测试来推动软件设计并强制依赖关系解耦的技术,可以单独进行.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect</span><br><span class="line">&#123;</span><br><span class="line">   <span class="keyword">const</span> Construstor = Vue.extend(Button);</span><br><span class="line">    <span class="keyword">const</span> vm = <span class="keyword">new</span> Construstor(&#123;</span><br><span class="line">        propsData:&#123;</span><br><span class="line">            icon : <span class="string">'setting'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    vm.$mount();</span><br><span class="line">    <span class="keyword">let</span> useElement = vm.$el.querySelector(<span class="string">'use'</span>);</span><br><span class="line">    <span class="keyword">let</span> href = useElement.getAttribute(<span class="string">'xlink:href'</span>);</span><br><span class="line">    expect(href).to.eq(<span class="string">'#i-setting'</span>);  <span class="comment">// 期望 href === '#i-setting' chai.js语法</span></span><br><span class="line">    vm.$el.remove();</span><br><span class="line">    vm.$destroy();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="2-chai-js"><a href="#2-chai-js" class="headerlink" title="2.chai.js"></a>2.chai.js</h3><p>chai.js 是专门用来执行单元测试的一个库 , 有 assert(断言) , should(应该) , expect(期望) 三种语法. </p>
<p>expect常用语法:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect;</span><br><span class="line">expect(foo).to.be.a(<span class="string">'string'</span>);</span><br><span class="line">expect(foo).to.equal(<span class="string">'mount'</span>);</span><br><span class="line">expect(foo).to.have.lengthOf(<span class="number">3</span>);</span><br><span class="line">expect(foo).to.have.property(<span class="string">'flavors'</span>).with.lengthOf(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>
<p>语法很简单,详情<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">查阅文档</a></p>
<h3 id="3-使用-Karma-Mocha做单元测试"><a href="#3-使用-Karma-Mocha做单元测试" class="headerlink" title="3.使用 Karma + Mocha做单元测试"></a>3.使用 Karma + Mocha做单元测试</h3><h4 id="1-工具"><a href="#1-工具" class="headerlink" title="1.工具"></a>1.工具</h4><ol>
<li><p>Karma(卡玛)是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例</p>
</li>
<li><p>Mocha(摩卡)是一个单元测试框架库,它用来写测试用例</p>
</li>
<li><p>Sinon(西农) 是一个 spy/mock/stub 库.</p>
<p>安装工具</p>
<p><code>npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies</code></p>
</li>
</ol>
<h4 id="2-步骤"><a href="#2-步骤" class="headerlink" title="2.步骤"></a>2.步骤</h4><ol>
<li><p>创建Karma配置</p>
<p><strong>里面有两个关键部位已经标出</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建 karma.conf.js，内容如下</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">config</span>) </span>&#123;</span><br><span class="line">    config.set(&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// base path that will be used to resolve all patterns (eg. files, exclude)</span></span><br><span class="line">        basePath: <span class="string">''</span>,</span><br><span class="line">        <span class="comment">// frameworks to use</span></span><br><span class="line">        <span class="comment">// available frameworks: https://npmjs.org/browse/keyword/karma-adapter</span></span><br><span class="line">        frameworks: [<span class="string">'mocha'</span>, <span class="string">'sinon-chai'</span>],</span><br><span class="line">        client: &#123;</span><br><span class="line">            chai: &#123;</span><br><span class="line">                includeStack: <span class="literal">true</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// list of files / patterns to load in the browser</span></span><br><span class="line">        files: [</span><br><span class="line">            <span class="string">'dist/**/*.test.js'</span>,</span><br><span class="line">            <span class="string">'dist/**/*.test.css'</span></span><br><span class="line">        ],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// list of files / patterns to exclude</span></span><br><span class="line">        exclude: [],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// preprocess matching files before serving them to the browser</span></span><br><span class="line">        <span class="comment">// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor</span></span><br><span class="line">        preprocessors: &#123;&#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// test results reporter to use</span></span><br><span class="line">        <span class="comment">// possible values: 'dots', 'progress'</span></span><br><span class="line">        <span class="comment">// available reporters: https://npmjs.org/browse/keyword/karma-reporter</span></span><br><span class="line">        reporters: [<span class="string">'progress'</span>],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// web server port</span></span><br><span class="line">        port: <span class="number">9876</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// enable / disable colors in the output (reporters and logs)</span></span><br><span class="line">        colors: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// level of logging</span></span><br><span class="line">        <span class="comment">// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG</span></span><br><span class="line">        logLevel: config.LOG_INFO,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// enable / disable watching file and executing tests whenever any file changes</span></span><br><span class="line">        autoWatch: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// start these browsers</span></span><br><span class="line">        <span class="comment">// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher</span></span><br><span class="line">        browsers: [<span class="string">'ChromeHeadless'</span>],</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">// Continuous Integration mode</span></span><br><span class="line">        <span class="comment">// if true, Karma captures browsers, runs the tests and exits</span></span><br><span class="line">        singleRun: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Concurrency level</span></span><br><span class="line">        <span class="comment">// how many browser should be started simultaneous</span></span><br><span class="line">        concurrency: <span class="literal">Infinity</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li><p>创建 test/button.test.js 文件</p>
<ul>
<li><blockquote>
<p>$mount()</p>
<p>如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 <code>vm.$mount()</code> 手动地挂载一个未挂载的实例。</p>
<p>如果没有提供 <code>elementOrSelector</code> 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。</p>
<p>这个方法返回实例自身，因而可以链式调用其它实例方法。</p>
</blockquote>
</li>
</ul>
</li>
</ol>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> expect = chai.expect;</span><br><span class="line"> <span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"> <span class="keyword">import</span> Button <span class="keyword">from</span> <span class="string">'../src/button'</span></span><br><span class="line"></span><br><span class="line"> Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"> Vue.config.devtools = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"> describe(<span class="string">'Button'</span>, () =&gt; &#123;</span><br><span class="line">     it(<span class="string">'存在.'</span>, () =&gt; &#123;</span><br><span class="line">         expect(Button).to.be.ok</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'可以设置icon.'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="comment">//使用extend方法,将Button对象构造成一个构造函数</span></span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button) </span><br><span class="line">         <span class="comment">//然后通过构造函数实例化Button</span></span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount() <span class="comment">//使用$mount()挂载,详情看上面</span></span><br><span class="line">         <span class="keyword">const</span> useElement = vm.$el.querySelector(<span class="string">'use'</span>)</span><br><span class="line">         expect(useElement.getAttribute(<span class="string">'xlink:href'</span>)).to.equal(<span class="string">'#i-settings'</span>)</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'可以设置loading.'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">                 loading: <span class="literal">true</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount()</span><br><span class="line">         <span class="keyword">const</span> useElements = vm.$el.querySelectorAll(<span class="string">'use'</span>)</span><br><span class="line">         expect(useElements.length).to.equal(<span class="number">1</span>)</span><br><span class="line">         expect(useElements[<span class="number">0</span>].getAttribute(<span class="string">'xlink:href'</span>)).to.equal(<span class="string">'#i-loading'</span>)</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'icon 默认的 order 是 1'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">         <span class="built_in">document</span>.body.appendChild(div)</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount(div)</span><br><span class="line">         <span class="keyword">const</span> icon = vm.$el.querySelector(<span class="string">'svg'</span>)</span><br><span class="line">         expect(getComputedStyle(icon).order).to.eq(<span class="string">'1'</span>)</span><br><span class="line">         vm.$el.remove()</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'设置 iconPosition 可以改变 order'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">         <span class="built_in">document</span>.body.appendChild(div)</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">                 iconPosition: <span class="string">'right'</span></span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount(div)</span><br><span class="line">         <span class="keyword">const</span> icon = vm.$el.querySelector(<span class="string">'svg'</span>)</span><br><span class="line">         expect(getComputedStyle(icon).order).to.eq(<span class="string">'2'</span>)</span><br><span class="line">         vm.$el.remove()</span><br><span class="line">         vm.$destroy()</span><br><span class="line">     &#125;)</span><br><span class="line">     it(<span class="string">'点击 button 触发 click 事件'</span>, () =&gt; &#123;</span><br><span class="line">         <span class="keyword">const</span> Constructor = Vue.extend(Button)</span><br><span class="line">         <span class="keyword">const</span> vm = <span class="keyword">new</span> Constructor(&#123;</span><br><span class="line">             propsData: &#123;</span><br><span class="line">                 icon: <span class="string">'settings'</span>,</span><br><span class="line">             &#125;</span><br><span class="line">         &#125;).$mount()</span><br><span class="line"></span><br><span class="line">         <span class="keyword">const</span> callback = sinon.fake(); <span class="comment">//使用间谍函数,捕获是否进行了回调</span></span><br><span class="line">         vm.$on(<span class="string">'click'</span>, callback)     <span class="comment">//</span></span><br><span class="line">         vm.$el.click()</span><br><span class="line">         expect(callback).to.have.been.called <span class="comment">//</span></span><br><span class="line"></span><br><span class="line">     &#125;)</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<p>3.创建测试脚本 </p>
<p>  在package.json里找到 scripts </p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"parcel build test/* --no-minify --no-cache &amp;&amp; karma start --single-				run"</span>,</span><br><span class="line">    <span class="string">"dev-test"</span>: <span class="string">"parcel watch test/* --no-cache &amp; karma start"</span>,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>  解释一下</p>
<ul>
<li><code>parcel build</code>使用parcel 打包</li>
<li><code>test/*</code>  test文件夹下面的所有文件</li>
<li><code>--no-minify</code> 不懂,不加会出错,加上</li>
<li><code>--no-cache</code>  不从缓存;里运行,有缓存也容易出错</li>
<li><code>karma start</code> karma启动</li>
<li><code>--single-run</code> 只运行一次</li>
<li><code>parcel watch</code> parcel一直盯着,有改动就打包</li>
<li><p><code>karma strat</code> 后面没加别的,一直运行</p>
<p>4.运行测试脚本</p>
</li>
</ul>
<p><code>npm run test</code></p>
<p><code>npm run dev-test</code></p>
<h3 id="4-持续测试"><a href="#4-持续测试" class="headerlink" title="4.持续测试"></a>4.持续测试</h3><p>​    使用  Travis Ci 来进行持续测试 , 就是我们把测试跑到他的服务器上,每提交一次仓库 ,就执行一次测试.</p>
<ol>
<li><p>在目录中添加 <code>.travis.yml</code> </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">language: node_js   <span class="comment">//指定语言 : nodejs</span></span><br><span class="line">node_js:            <span class="comment">//指定版本,可以做多版本测试哦,很强很牛逼</span></span><br><span class="line">  - <span class="string">"8"</span></span><br><span class="line">  - <span class="string">"9"</span></span><br><span class="line">  - <span class="string">"10"</span></span><br><span class="line">addons:</span><br><span class="line">  chrome: stable	<span class="comment">//使用chrome测试</span></span><br><span class="line">sudo: required      <span class="comment">// 需要管理员权限</span></span><br><span class="line">before_script:		<span class="comment">//不懂,不加可能有BUG</span></span><br><span class="line">  - <span class="string">"sudo chown root /opt/google/chrome/chrome-sandbox"</span></span><br><span class="line">  - <span class="string">"sudo chmod 4755 /opt/google/chrome/chrome-sandbox"</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>将代码提交到GitHub</p>
</li>
<li><p>在 <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">Travis</a> 上使用 GITHub登录,然后将你要测试的项目添加进去</p>
</li>
<li><p>等着就完事儿了</p>
</li>
</ol>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-VueRouter" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="2869b8d0.html">Vue-Router</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="2869b8d0.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Vue-Router"><a href="#Vue-Router" class="headerlink" title="Vue-Router"></a>Vue-Router</h3><h4 id="1-简单配置"><a href="#1-简单配置" class="headerlink" title="1.简单配置"></a>1.简单配置</h4><p>创建router.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> index <span class="keyword">from</span> <span class="string">'./components/index'</span></span><br><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">'./components/user'</span></span><br><span class="line">Vue.use(Router)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">     routes:[</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">component</span>:index&#125;,</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/user'</span>,<span class="attr">component</span>:user&#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在main.js里加入根实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router'</span></span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    render: <span class="function"><span class="params">h</span> =&gt;</span> h(App),</span><br><span class="line">    router</span><br><span class="line">&#125;).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<p>在App.vue里使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;router-link to=&quot;/&quot;&gt;index&lt;/router-link&gt;</span><br><span class="line">        &lt;router-link to=&quot;/user&quot;&gt;info&lt;/router-link&gt;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &apos;app&apos;,</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="2-基础用法"><a href="#2-基础用法" class="headerlink" title="2.基础用法"></a>2.基础用法</h4><h5 id="1-动态路由匹配"><a href="#1-动态路由匹配" class="headerlink" title="1.动态路由匹配"></a>1.动态路由匹配</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//router.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">     routes:[</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">component</span>:index&#125;,</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/user/:id'</span>,<span class="attr">component</span>:user&#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>可以以 冒号 标记参数，该参数可以通过 <code>this.$router.params.id</code>获得。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- user.vue --&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;id:&#123;&#123;id&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &quot;info&quot;,</span><br><span class="line">        computed:&#123;</span><br><span class="line">            id()&#123;</span><br><span class="line">                return this.$route.params.id</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p><strong>响应路由参数的变化</strong></p>
<blockquote>
<p>提醒一下，当使用路由参数时，例如从 <code>/user/1</code> 导航到 <code>/user/2</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p>
<p>复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) <code>$route</code> 对象：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">       name: <span class="string">"info"</span>,</span><br><span class="line">       computed:&#123;</span><br><span class="line">           id()&#123;</span><br><span class="line">               <span class="keyword">return</span> <span class="keyword">this</span>.$route.params.id</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;,</span><br><span class="line">       watch:&#123;</span><br><span class="line">           <span class="string">'$route'</span>(to,<span class="keyword">from</span>)&#123;</span><br><span class="line">               <span class="comment">//（到哪去，从哪来）</span></span><br><span class="line">               <span class="comment">//对路由变化做出响应</span></span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<p>或者使用<code>beforeRouteUpdate(to,from,next)</code>守卫</p>
<h5 id="2-嵌套路由-children"><a href="#2-嵌套路由-children" class="headerlink" title="2.嵌套路由 children"></a>2.嵌套路由 children</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">    routes: [</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">'/'</span>,</span><br><span class="line">            component: index</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">'/user/:id/'</span>,</span><br><span class="line">            component: user,</span><br><span class="line">            children: [</span><br><span class="line">                &#123;</span><br><span class="line">                    path: <span class="string">'profile'</span>,</span><br><span class="line">                    component: profile</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>加上 children 以后不要以为万事大吉了,需要在 <code>user</code> 里面加上 <code>router-view</code> 标签，不然无法展示。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        id:&#123;&#123;$route.params.id&#125;&#125;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<p><strong>要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。</strong></p>
<p>你会发现，<code>children</code> 配置就是像 <code>routes</code> 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。</p>
<h5 id="3-编程式的导航"><a href="#3-编程式的导航" class="headerlink" title="3.编程式的导航"></a>3.编程式的导航</h5><p>之前我们写导航是这么写的：<code>&lt;router-link to=&quot;/user/1/profile&quot;&gt;&lt;/router-link&gt;</code>,这叫做声明式的导航。</p>
<p>除了使用 <code>&lt;router-link&gt;</code> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。</p>
<h2 id="route-push-location-onComplete-onAbort"><a href="#route-push-location-onComplete-onAbort" class="headerlink" title="route.push(location,onComplete?,onAbort?)"></a><code>route.push(location,onComplete?,onAbort?)</code></h2><p><strong>注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。</strong></p>
<p>想要导航到不同的 URL，则使用 <code>router.push</code> 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。</p>
<p>当你点击 <code>&lt;router-link&gt;</code> 时，这个方法会在内部调用，所以说，点击 <code>&lt;router-link :to=&quot;...&quot;&gt;</code> 等同于调用 <code>router.push(...)</code>。</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;router-link :to=&quot;...&quot;&gt;</code></td>
<td><code>router.push(...)</code></td>
</tr>
</tbody>
</table>
<p>该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串</span></span><br><span class="line">router.push(<span class="string">'home'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'home'</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 命名的路由</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="number">123</span> &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 带查询参数，变成 /register?plan=private</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'register'</span>, <span class="attr">query</span>: &#123; <span class="attr">plan</span>: <span class="string">'private'</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> userId = <span class="number">123</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">`/user/<span class="subst">$&#123;userId&#125;</span>`</span> &#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line"><span class="comment">// 这里的 params 不生效</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'/user'</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user</span></span><br></pre></td></tr></table></figure>
<p>同样的规则也适用于 <code>router-link</code> 组件的 <code>to</code> 属性。</p>
<p>在 2.2.0+，可选的在 <code>router.push</code> 或 <code>router.replace</code> 中提供 <code>onComplete</code> 和 <code>onAbort</code> 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。</p>
<p><strong>注意：</strong>如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 <code>/users/1</code> -&gt; <code>/users/2</code>)，你需要使用 <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"><code>beforeRouteUpdate</code></a> 来响应这个变化 (比如抓取用户信息)。</p>
<h2 id="route-replace-location-onComplete-onAbort"><a href="#route-replace-location-onComplete-onAbort" class="headerlink" title="route.replace(location,onComplete?,onAbort?)"></a><code>route.replace(location,onComplete?,onAbort?)</code></h2><p>和 push 很像，唯一不同的是，它不会向 history 添加记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 这意味着，浏览器上的后退按钮将不会后退到前一个页面。</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;router-link :to=&quot;...&quot; replace&gt;</code></td>
<td><code>router.replace(...)</code></td>
</tr>
</tbody>
</table>
<h2 id="router-go-n"><a href="#router-go-n" class="headerlink" title="router.go(n)"></a><code>router.go(n)</code></h2><p>参数 n 是整数，意思是在 histroy 记录中向前或者向后几步。类似 <code>window.history.go(n)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在浏览器记录中前进一步，等同于 history.forward()</span></span><br><span class="line">router.go(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 后退一步记录，等同于 history.back()</span></span><br><span class="line">router.go(<span class="number">-1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 前进 3 步记录</span></span><br><span class="line">router.go(<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 history 记录不够用，那就默默地失败呗</span></span><br><span class="line">router.go(<span class="number">-100</span>)</span><br><span class="line">router.go(<span class="number">100</span>)</span><br></pre></td></tr></table></figure>
<h5 id="4-命名路由"><a href="#4-命名路由" class="headerlink" title="4.命名路由"></a>4.命名路由</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">      &#123;</span><br><span class="line">          name:<span class="string">'index'</span>,</span><br><span class="line">          path: <span class="string">'/'</span>,</span><br><span class="line">          component: index</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">          name:<span class="string">'user'</span>,</span><br><span class="line">          path: <span class="string">'/user/:id'</span>,</span><br><span class="line">          component: user,</span><br><span class="line">          children: [</span><br><span class="line">              &#123;</span><br><span class="line">                  name:<span class="string">'profile'</span>,</span><br><span class="line">                  path: <span class="string">'profile'</span>,</span><br><span class="line">                  component: profile</span><br><span class="line">              &#125;</span><br><span class="line">          ]</span><br><span class="line">      &#125;,</span><br><span class="line">  ]</span><br></pre></td></tr></table></figure>
<p>加上 name 会使我们在 push 和 to 操作的时候更加方便</p>
<p><code>route.push({name:&#39;user&#39;,params:{id:123}})</code></p>
<p><code>&lt;router-link :to=&#39;{name:&quot;user&quot;,params:{id:123}}&#39;&gt;&lt;/router-link&gt;</code></p>
<h5 id="5-命名视图"><a href="#5-命名视图" class="headerlink" title="5.命名视图"></a>5.命名视图</h5><p>当我们想在一个页面中展示两个视图组件的时候就用到命名视图了。</p>
<p>首先，在 router.js里修改。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        name:<span class="string">'index'</span>,</span><br><span class="line">        path: <span class="string">'/'</span>,</span><br><span class="line">        components: &#123;   <span class="comment">//component ---&gt; components</span></span><br><span class="line">            <span class="keyword">default</span>:index,  <span class="comment">//默认index</span></span><br><span class="line">            a:profile       <span class="comment">// a是profile</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>
<p>在视图里增加入口。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>这样就可以展示两个视图组件了。</p>
<p><strong>嵌套命名视图</strong></p>
<p>简单的来说就是children里有命名视图</p>
<p>比如，我想在 /user/123/profile 里展示 profile 和 photo ，就像下面这么写。这样，user,profile,photo 这些视图组件就都在一个页面里了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">         name:<span class="string">'user'</span>,</span><br><span class="line">         path: <span class="string">'/user/:id'</span>,</span><br><span class="line">         component: user,</span><br><span class="line">         children: [</span><br><span class="line">             &#123;</span><br><span class="line">                 name:<span class="string">'profile'</span>,</span><br><span class="line">                 path: <span class="string">'profile'</span>,</span><br><span class="line">                 components: &#123;</span><br><span class="line">                     <span class="keyword">default</span>: profile,</span><br><span class="line">                     a:photo</span><br><span class="line">                 &#125;</span><br><span class="line">             &#125;</span><br><span class="line">         ]</span><br><span class="line">     &#125;,</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view name=&quot;a&quot;&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>
<h5 id="6-重定向"><a href="#6-重定向" class="headerlink" title="6.重定向"></a>6.重定向</h5><p>重定向的三种方式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = [</span><br><span class="line">    &#123;</span><br><span class="line">        name:<span class="string">'foo'</span></span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="string">'/b'</span></span><br><span class="line">	&#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path:<span class="string">'/c'</span>,</span><br><span class="line">        redirect:<span class="string">'&#123;name:foo&#125;'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="function"><span class="params">to</span>=&gt;</span>&#123;</span><br><span class="line">           <span class="comment">// 方法接收 目标路由 作为参数</span></span><br><span class="line">          <span class="comment">// return 重定向的 字符串路径/路径对象</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>注意<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">导航守卫</a>并没有应用在跳转路由，上而仅仅应用在其目标上 ，第下面例子中，为 <code>/a</code> 路由添加一个 <code>beforeEach</code> 或 <code>beforeLeave</code> 守卫并不会有任何效果。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = [</span><br><span class="line">    &#123;</span><br><span class="line">        name:<span class="string">'foo'</span></span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="string">'/b'</span>,</span><br><span class="line">        beforeLeave(to,<span class="keyword">from</span>,next)&#123;&#125;</span><br><span class="line">	&#125;</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<h5 id="7-别名"><a href="#7-别名" class="headerlink" title="7.别名"></a>7.别名</h5><p>当我们想从<code>/a</code>跳转到<code>/b</code>，但是又不想改变URL，就用到了别名alias</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">'/a'</span>, <span class="attr">component</span>: A, <span class="attr">alias</span>: <span class="string">'/b'</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。</strong> </p>
<h5 id="8-路由组件传参"><a href="#8-路由组件传参" class="headerlink" title="8.路由组件传参"></a>8.路由组件传参</h5><ul>
<li>$route</li>
</ul>
<p>比如我们要展示用户 alan 的个人主页，路由是<code>/user/alan/profile</code> , 可以通过 <code>$route.params.id</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;&#123;&#123;$route.params.id&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>props 布尔模式</li>
</ul>
<p>在路由配置中写入<code>props:true</code>,这样<code>route.params</code>会被设置为组件属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">          name:<span class="string">'user'</span>,</span><br><span class="line">          path: <span class="string">'/user/:id'</span>,</span><br><span class="line">          component: user,</span><br><span class="line">          props:<span class="literal">true</span>,</span><br><span class="line">          children: [</span><br><span class="line">              &#123;</span><br><span class="line">                  name:<span class="string">'profile'</span>,</span><br><span class="line">                  path: <span class="string">'profile'</span>,</span><br><span class="line">                  components: &#123;</span><br><span class="line">                      <span class="keyword">default</span>: profile,</span><br><span class="line">                      a:index</span><br><span class="line">                  &#125;,</span><br><span class="line">                  <span class="comment">// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：</span></span><br><span class="line">                  props: &#123;<span class="attr">default</span>:<span class="literal">true</span>,<span class="attr">a</span>:<span class="literal">false</span>&#125;</span><br><span class="line">              &#125;</span><br><span class="line">          ]</span><br><span class="line">      &#125;,</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;id&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default&#123;</span><br><span class="line">        props:[&apos;id&apos;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>props 对象模式</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">       &#123;</span><br><span class="line">           name:<span class="string">'index'</span>,</span><br><span class="line">           path: <span class="string">'/'</span>,</span><br><span class="line">           props:&#123;<span class="attr">username</span>:<span class="string">'map_name'</span>&#125;,</span><br><span class="line">           component:index</span><br><span class="line">       &#125;,</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;username&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default&#123;</span><br><span class="line">        props:[&apos;username&apos;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>注意，此时的 props 必须是静态的。</p>
<ul>
<li>props 函数模式</li>
</ul>
<p>这样就可以动态生成 props ，比如Url 是 <code>/user/:id/postId/:postId</code>,我现在想把所有参数传进去</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">       &#123;</span><br><span class="line">           name:<span class="string">'user'</span>,</span><br><span class="line">           path: <span class="string">'/user/:id/postId/:postId'</span>,</span><br><span class="line">	   props:  <span class="function">(<span class="params">route</span>) =&gt;</span> (&#123; <span class="attr">params</span>: route.params &#125;) ,</span><br><span class="line">           component:User</span><br><span class="line">       &#125;,</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;params.id&#125;&#125;--&#123;&#123;params.postId&#125;&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">        props:[<span class="string">'params'</span>]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-写轱辘时候发现的新知识" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="9eed9a2c.html">Vue--小知识</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="9eed9a2c.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-Vue的双向绑定其实是单向绑定"><a href="#1-Vue的双向绑定其实是单向绑定" class="headerlink" title="1.Vue的双向绑定其实是单向绑定"></a>1.Vue的双向绑定其实是单向绑定</h3><p><strong>双向绑定的假设</strong></p>
<blockquote>
<p>假设，我有两个儿子，大儿子和二儿子</p>
<p>我有500元</p>
<p>大儿子要花500买衣服，把钱花了</p>
<p>二儿子要花200买书籍，钱没了。</p>
<p>原因：大儿子花钱的时候没有告诉我。</p>
<p>所以：我定了规矩，以后花钱必须先跟我说，然后我再把钱给你！</p>
</blockquote>
<ul>
<li>因此，Vue的 v-model 变成了两个单项绑定组成的双向绑定，把 v-model 拆分可以变成这样</li>
</ul>
<ul>
<li>现在我加一个子组件child ，有一个属性 selected ，通过 button 切换值</li>
</ul>
<ul>
<li>这样能改，但是会报出警告，告诉你别在子组件里自己改，你要通过父亲修改（上面的假设）</li>
</ul>
<p>​        所以我改成这样</p>
<p>这样子组件的修改需要通过父组件，流程</p>
<p><strong>Click button =&gt; </strong></p>
<p><strong>触发@click事件=&gt;</strong></p>
<p><strong>$emit触发当前实例上的事件“xxx”,传递$events=&gt;</strong></p>
<p><strong>父组件监听 xxx方法，并将 value = $events =&gt; </strong></p>
<p><strong>data中的value改变 =&gt; </strong></p>
<p><strong>selected改变为当前value值</strong></p>
<ul>
<li><p>上面的实例更加证明了，Vue是单向数据流</p>
<p>但是双向绑定很爽，于是作者给了我们一个语法糖  .sync语法糖</p>
</li>
</ul>
<p>  原理写在下面注释里了，其实还是 监听了 @updata:selected 方法</p>
<h3 id="2-created-和mounted-父子传参"><a href="#2-created-和mounted-父子传参" class="headerlink" title="2.created()和mounted() 父子传参"></a>2.created()和mounted() 父子传参</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>) <span class="comment">//这是created ,将div写入内存</span></span><br><span class="line"><span class="built_in">document</span>.body.appendChild(div) <span class="comment">//这是mounted ,将div挂到页面里</span></span><br></pre></td></tr></table></figure>
<p><strong>问题来了,如果div里有子元素,那么是什么顺序呢?</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>) <span class="comment">// div created</span></span><br><span class="line"><span class="keyword">var</span> chilid = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>) <span class="comment">// child created</span></span><br><span class="line"><span class="built_in">document</span>.body.appendChild(chilid) <span class="comment">// child mounted</span></span><br><span class="line"><span class="built_in">document</span>.body.appendChild(div) <span class="comment">// div mouted</span></span><br></pre></td></tr></table></figure>
<p>所以我们可以看到顺序是</p>
<p><strong>创建父亲 —-&gt; 创建儿子 —&gt; mounted儿子 —&gt;mounted 父亲</strong></p>
<p>因此,得到在父子组件传参的时候,父亲的mouted()里面,一定能拿到所有儿子:<code>this.$children</code></p>
<h3 id="3-data和computed"><a href="#3-data和computed" class="headerlink" title="3.data和computed"></a>3.data和computed</h3><p>当一个属性需要跟随另一个属性变化的时候使用 <code>computed</code></p>
<p>data里的属性不会跟随其他属性变化</p>
<h3 id="4-Vue开发插件"><a href="#4-Vue开发插件" class="headerlink" title="4.Vue开发插件"></a>4.Vue开发插件</h3><p>在写Toast组件的时候使用到了这个方法。</p>
<p>Vue.js的插件应当有一个公开方法<code>install</code>,第一个参数是<code>vue</code>,第二个参数是可选的选项对象<code>options</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Plugin.js</span></span><br><span class="line">MyPlugin.install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue, options</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 1. 添加全局方法或属性</span></span><br><span class="line">  Vue.myGlobalMethod = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 逻辑...</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2. 添加全局资源</span></span><br><span class="line">  Vue.directive(<span class="string">'my-directive'</span>, &#123;</span><br><span class="line">    bind (el, binding, vnode, oldVnode) &#123;</span><br><span class="line">      <span class="comment">// 逻辑...</span></span><br><span class="line">    &#125;</span><br><span class="line">    ...</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 3. 注入组件</span></span><br><span class="line">  Vue.mixin(&#123;</span><br><span class="line">    created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 逻辑...</span></span><br><span class="line">    &#125;</span><br><span class="line">    ...</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 4. 添加实例方法</span></span><br><span class="line">  Vue.prototype.$myMethod = <span class="function"><span class="keyword">function</span> (<span class="params">methodOptions</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 逻辑...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>然后在 app.js 里注册</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Plugin <span class="keyword">from</span> <span class="string">'./plugin'</span></span><br><span class="line">Vue.use(Plugin，&#123;<span class="attr">someOptions</span>:<span class="literal">true</span>&#125;)</span><br></pre></td></tr></table></figure>
<p>然后就可以使用了</p>
<h3 id="5-Element-getBoundingClientRect"><a href="#5-Element-getBoundingClientRect" class="headerlink" title="5.Element.getBoundingClientRect()"></a>5.Element.getBoundingClientRect()</h3><p>返回Element的大小以及相对与视口的位置。</p>
<p>在使用<code>vm.$el.style.height</code>获取不到高度等属性的时候可以尝试使用它</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">文档</a></p>
<h3 id="6-ref"><a href="#6-ref" class="headerlink" title="6.ref"></a>6.ref</h3><p>在Toast里使用了ref。</p>
<p>在普通的DOM 元素上使用，引用指向的就是 DOM 元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span> </span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">ref</span>=<span class="string">'test'</span>&gt;</span></span><br><span class="line">        123</span><br><span class="line">      <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取	</span></span><br><span class="line"><span class="keyword">this</span>.$refs.test <span class="comment">// &lt;p&gt;123&lt;/p&gt; 获取node元素</span></span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">文档</a></p>
<p>如果用在子组件上，引用就指向组件实例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">child</span> <span class="attr">ref</span>=<span class="string">'child'</span>&gt;</span><span class="tag">&lt;/<span class="name">child</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="7-vm-slots"><a href="#7-vm-slots" class="headerlink" title="7.vm.$slots"></a>7.vm.$slots</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span> = <span class="string">'header'</span>&gt;</span></span><br><span class="line">  header</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vm.$slot.header<span class="comment">//header</span></span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">文档</a></p>
<h3 id="8-元素放到最后面"><a href="#8-元素放到最后面" class="headerlink" title="8.元素放到最后面"></a>8.元素放到最后面</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.a</span>&#123;<span class="attribute">margin-left</span>:auto&#125;</span><br></pre></td></tr></table></figure>
<h3 id="9-EventBus"><a href="#9-EventBus" class="headerlink" title="9.EventBus"></a>9.EventBus</h3><p>当我们写父子传参,爷儿孙传参的时候,可以使用EventBus,会很方便.</p>
<p>因为Vue是不允许儿子改变父亲的值,只能告诉父亲我要改了,父亲再改</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//爷爷组件</span></span><br><span class="line"><span class="keyword">import</span> Vue form <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">  name:<span class="string">'爷爷'</span>,</span><br><span class="line">  props:[<span class="string">'selected'</span>], <span class="comment">//当前选择的tab</span></span><br><span class="line">  data()&#123; </span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">      eventBus:<span class="keyword">new</span> Vue() <span class="comment">//通过data生成一个eventBus</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide()&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      eventBus:<span class="keyword">this</span>.eventBus <span class="comment">//使用provide给所有子组件注入这个值</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">    mounted()&#123;</span><br><span class="line">      <span class="keyword">this</span>.eventBus.$emit(<span class="string">'update:selected'</span>,<span class="keyword">this</span>.selected) <span class="comment">//初始化,也可以不初始化,看实际代码需不需要</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//子组件1</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">  name:<span class="string">'儿子1号'</span>,</span><br><span class="line">  inject:[<span class="string">'eventBus'</span>],</span><br><span class="line">  props:[<span class="string">'name'</span>]</span><br><span class="line">  created()&#123;</span><br><span class="line">    <span class="keyword">this</span>.eventBus.$on(<span class="string">'update:selected'</span>,(name)=&gt;&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(name)    <span class="comment">//儿子1号监听事件.</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    change()&#123;</span><br><span class="line">      <span class="keyword">this</span>.eventBus.$emit(<span class="string">'update:selected'</span>,<span class="keyword">this</span>.name) <span class="comment">//儿子1号主动触发事件</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//子组件2</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">  name:<span class="string">'儿子2号'</span>,</span><br><span class="line">  inject:[<span class="string">'eventBus'</span>],</span><br><span class="line">  props:[<span class="string">'name'</span>]</span><br><span class="line">  created()&#123;</span><br><span class="line">    <span class="keyword">this</span>.eventBus.$on(<span class="string">'update:selected'</span>,(name)=&gt;&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(name)    <span class="comment">//儿子2号监听事件.</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//孙子组件同理</span></span><br><span class="line"><span class="comment">//........</span></span><br><span class="line"><span class="comment">//........</span></span><br></pre></td></tr></table></figure>
<ol>
<li><p>创建一个EventBus为啥要用 new Vue()呢?</p>
<p>因为我们使用了 <code>$on $emit</code>,只要符合这个条件就可以了,当然有时候还要用到<code>$off</code></p>
</li>
<li><p>EventBus的作用(不仅是父子，还有子子)</p>
<p>我们在爷爷里声明了EventBus后,他就是我们的一个<strong>数据处理中心</strong>,例如上面的例子</p>
<p>儿子1号通过EventBus触发update事件<code>:selected=&#39;儿子1号&#39;</code>,</p>
<p>与此同时,儿子2号一直在监听update事件,他就知道了,现在selected === ‘儿子一号’(<strong>子组件之前的传递</strong>)，</p>
<p>与此同时，爷爷也在监听update事件(父子传递)，</p>
<p>与此同时，孙子也在监听update事件(父子传递)，</p>
</li>
<li><p><strong>EventBus 永远是 让爸爸更新自己，永远不要自己更新自己，让爸爸操控所有的事情</strong>，参考collapse组件的eventBus。</p>
</li>
</ol>
<h3 id="10-vue-里面绑定-class"><a href="#10-vue-里面绑定-class" class="headerlink" title="10.vue 里面绑定 class"></a>10.vue 里面绑定 class</h3><p><strong>推荐使用对象加数组的形式。</strong></p>
<p>计算属性里</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">computed:&#123;</span><br><span class="line">  itemclass()&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`position-<span class="subst">$&#123;<span class="keyword">this</span>.position&#125;</span>`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">computed:&#123;</span><br><span class="line">  someClasses()&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">`position-<span class="subst">$&#123;<span class="keyword">this</span>.position&#125;</span>`</span>,<span class="string">`text-<span class="subst">$&#123;<span class="keyword">this</span>.text&#125;</span>`</span>]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">computed:&#123;</span><br><span class="line">  someClasses()&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;[<span class="string">`position-<span class="subst">$&#123;<span class="keyword">this</span>.position&#125;</span>`</span>]:<span class="literal">true</span>,[<span class="string">`text-<span class="subst">$&#123;<span class="keyword">this</span>.text&#125;</span>`</span>]:<span class="literal">true</span>&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>template里直接放进 :class 里就行。</p>
<h4 id="11-组件的递归"><a href="#11-组件的递归" class="headerlink" title="11.组件的递归"></a>11.组件的递归</h4><p>这个需求是做多级联动选择是出现的，因为你无法判断用户提供给你的数组的深度，有可能是5层，也有可能是6层，这时候就用到了组建的递归。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;source.item&#125;&#125;</span><br><span class="line">        &lt;cascader v-if=&apos;source.children&apos;</span><br><span class="line">             	  v-for=&apos;item in source.children&apos;</span><br><span class="line">             	  :source=&apos;item&apos;&gt;</span><br><span class="line">         &lt;/cascader&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default&#123;</span><br><span class="line">        name:&apos;cascader&apos;,</span><br><span class="line">        props:&#123;</span><br><span class="line">            source:&#123;</span><br><span class="line">                type:Object</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// source 格式 这里是三层 省-市-区</span></span><br><span class="line">source:[</span><br><span class="line">    &#123;</span><br><span class="line">        name:<span class="string">'山东'</span>,</span><br><span class="line">        children:[</span><br><span class="line">            &#123;</span><br><span class="line">                name:<span class="string">'济南'</span>,</span><br><span class="line">                children:[</span><br><span class="line">                    &#123;</span><br><span class="line">                        name:<span class="string">'市中区'</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        name:<span class="string">'历下区'</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                name:<span class="string">'淄博'</span>,</span><br><span class="line">                children:[</span><br><span class="line">                    &#123;</span><br><span class="line">                        name:<span class="string">'张店区'</span></span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        name:<span class="string">'临淄区'</span></span><br><span class="line">                    &#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p><strong>注意：该组件 template 中使用的标签名要和 name 相同，这样 Vue 才能知道这是一个递归组件。</strong></p>
<p>该组件，接收一个类型为 Object 的 source 数据，展示 source.item 。同时在组件里面继续调用自己，并进行三个操作。</p>
<pre><code>1. 判断是否还有下一层 children。
   2. 循环下一层。
   3. 将下一层的数据绑定到source。
</code></pre><p>这样就形成了组件的复用。</p>
<h4 id="12-轮子中写函数（名字没想好，瞎起的）"><a href="#12-轮子中写函数（名字没想好，瞎起的）" class="headerlink" title="12.轮子中写函数（名字没想好，瞎起的）"></a>12.轮子中写函数（名字没想好，瞎起的）</h4><p>在制作级联组件的时候遇到一个需求，就是用户需要ajax传输信息，用户获取了数据，怎么能放到组件上应用呢？这个就是需要轮子制作者做的了。</p>
<p>用户使用时需要做的事</p>
<ol>
<li>定义一个函数，获取数据后通过 callback 调用</li>
<li>在标签上绑定定义的函数，传给子组件，传过去的值就是一个 Function</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div :load-data=&apos;loadData&apos;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    loadData(callback)&#123;</span><br><span class="line">        axios.get(<span class="string">'xxx/data.php'</span>,(res)=&gt;&#123;</span><br><span class="line">            callback(res)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>我需要做的事情</p>
<ol>
<li>定义好 props</li>
<li>定义好 callback 函数</li>
<li>调用 this.loadData(callback)</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    props:&#123;</span><br><span class="line">        loadData:&#123;</span><br><span class="line">            type:<span class="built_in">Function</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        resovleData()&#123;</span><br><span class="line">            <span class="keyword">let</span> callback = <span class="function">(<span class="params">result</span>)=&gt;</span>&#123;<span class="keyword">return</span> result+<span class="string">'some'</span>&#125;;</span><br><span class="line">            <span class="keyword">this</span>.loadData(callback)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>回调 : 把别人给我的函数调用一下。</p>
<p>总结：其实就是用户再前面写好获取数据的方法，然后把这个方法传到子组件，这样我们就能在子组件中获取到用户的数据，然后处理数据。</p>

      

      
        
    </div>
  </div>
  
</article>



  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="index3.html">&laquo; Prev</a><a class="page-number" href="index.html">1</a><a class="page-number" href="index3.html">2</a><span class="page-number current">3</span><a class="page-number" href="index5.html">4</a><a class="extend next" rel="next" href="index5.html">Next &raquo;</a>
    </nav>
  
</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
